@trackunit/react-components 0.0.164 → 0.0.166

package/components/Alert/Alert.d.ts

@@ -1,6 +1,6 @@
+import { IntentColors } from "@trackunit/ui-design-tokens";
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
-import { IntentColors } from "../../constants";
 export declare type AlertActionType = "primary" | "secondary";
 export declare type AlertAction = {
     label: string;

package/components/Badge/Badge.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
+import { ThemeColors } from "@trackunit/ui-design-tokens";
 import { CommonProps } from "../../common/CommonProps";
-import { Colors } from "../../constants/colors";
 export declare type BadgeSize = "medium" | "large";
 interface BaseBadgeProps extends CommonProps {
     /**
      * The color of the badge.
      */
-    color?: Colors;
+    color?: ThemeColors;
     /**
      * Specifies whether the badge is subtle or not.
      * Subtle badges have a light background color wither a darker text color.

package/components/Icon/Icon.d.ts

@@ -1,7 +1,7 @@
+import { ThemeColors } from "@trackunit/ui-design-tokens";
 import { HeroIconName, TrackunitIconName } from "@trackunit/ui-icons";
 import * as React from "react";
 import { CommonProps, Size } from "../../common/CommonProps";
-import { Colors } from "../../constants/colors";
 export interface IconProps extends CommonProps {
     /**
      * The name of the icon to be rendered.
@@ -13,7 +13,7 @@ export interface IconProps extends CommonProps {
      * Supports any colors from the theme.
      * Custom colors can be used by setting a text color in the className.
      */
-    color?: Colors;
+    color?: ThemeColors;
     /**
      * The size of the icon.
      * Small = 16x16px, medium = 20x20px, Large = 24x24px.

package/components/Indicator/Indicator.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
+import { ThemeColors } from "@trackunit/ui-design-tokens";
 import { CommonProps } from "../../common/CommonProps";
-import { Colors } from "../../constants/colors";
 export interface IndicatorProps extends CommonProps {
     /**
      * The icon to be rendered inside the indicator component
@@ -9,7 +9,7 @@ export interface IndicatorProps extends CommonProps {
     /**
      * A color token used to style the icon and the icon background
      */
-    color?: Colors;
+    color?: ThemeColors;
     /**
      * A text label to be displayed next to the indicator
      */

package/components/Tag/Tag.d.ts

@@ -1,13 +1,13 @@
+import { ThemeColors } from "@trackunit/ui-design-tokens";
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
-import { Colors } from "../../constants/colors";
 export declare type TagSize = "small" | "medium";
 export interface TagProps extends CommonProps {
     /**
      * The color of the tag.
      *
      */
-    color?: Colors;
+    color?: ThemeColors;
     /**
      * A handler for a click event triggered on X icon.
      * If not passed then x icon won't be visible.

package/components/ValueBar/ValueBarHelper.d.ts

@@ -15,13 +15,6 @@ export declare const getScore: (value: number, min: number, max: number) => numb
  * @returns {string} color value
  */
 export declare const getDefaultFillColor: (score: number) => string;
-/**
- * Helper function to get normalized color
- *
- * @param {number} levelColor - color, ex --color-green-600
- * @returns {string} normalized color value
- */
-export declare const getNormalizedLevelColor: (levelColor: string) => string;
 /**
  * Helper function to get custom color used by the ValueBar
  *

package/components/buttons/shared/ButtonProps.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
+import { GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
 import { CommonProps, Size } from "../../../common/CommonProps";
-import { GeneralColors, IntentColors } from "../../../constants";
 export declare type ButtonVariant = "filled" | "transparent";
 export declare type ButtonColor = Extract<GeneralColors, "primary" | "secondary"> | Extract<IntentColors, "info" | "warning" | "danger"> | "tertiary";
 export declare type ButtonType = "button" | "submit";

package/index.d.ts

@@ -1,5 +1,4 @@
 export * from "./common";
 export * from "./components";
-export * from "./constants";
 export * from "./hooks";
 export * from "./layout";

package/index.js

@@ -19,7 +19,7 @@ export { default as ValueType } from 'react-select';
 import ReactAsyncCreatableSelect from 'react-select/async-creatable';
 import ReactCreatableSelect from 'react-select/creatable';
 import ReactAsyncSelect from 'react-select/async';
-import { getColorValue } from '@trackunit/ui-design-tokens';
+import { color } from '@trackunit/ui-design-tokens';
 
 const docs = {
   source: {
@@ -303,72 +303,6 @@ const IconContainer$2 = tw.div`
   ${p => p.$size === "small" ? tws`tu-button__container--small` : null}
 `;
 
-/**
- * ? A collection of all the types and tokens related to the named colors in the default theme.
- */
-
-/**
- * The general color palette
- * Should be available in most if not all colored components
- */
-const generalColors = {
-  PRIMARY: "primary",
-  SECONDARY: "secondary",
-  ACCENT: "accent",
-  NEUTRAL: "neutral"
-};
-/**
- * The intent color palette
- * Should be available for most colored components such as "Button", "Alert", "Indicator", "Badge"
- */
-
-const intentColors = {
-  INFO: "info",
-  SUCCESS: "success",
-  WARNING: "warning",
-  DANGER: "danger"
-};
-/**
- * The Criticality color palette
- * Should be available in any component that could be used to display the criticality of an asset or event
- */
-
-const criticalityColors = {
-  GOOD: "good",
-  LOW: "low",
-  CRITICAL: "critical"
-};
-/**
- * The Activity color palette
- * Should be available in any component that could be used to display the Activity state of an asset
- */
-
-const activityColors = {
-  WORKING: "working",
-  IDLE: "idle",
-  STOPPED: "stopped",
-  UNKNOWN: "unknown"
-};
-/**
- * The Rental status color palette
- * Should be available in any component that could be used to display the rental status of an asset
- */
-
-const rentalStatusColors = {
-  ON_RENT: "ON_RENT",
-  RETURNED: "RETURNED",
-  AVAILABLE: "AVAILABLE",
-  PICKUP_READY: "PICKUP_READY",
-  TRANSFER: "TRANSFER",
-  IN_REPAIR: "IN_REPAIR",
-  OTHER_RENTAL_STATUS: "OTHER_RENTAL_STATUS"
-};
-/**
- * The full color palette
- */
-
-const colors = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, generalColors), intentColors), criticalityColors), activityColors), rentalStatusColors);
-
 const IconSizeClassMap = {
   small: tws`tu-icon--small`,
   medium: tws`tu-icon--medium`,
@@ -441,49 +375,49 @@ const Root$4 = tw.span`
   $color
 }) => {
   switch ($color) {
-    case colors.PRIMARY:
+    case "primary":
       return tws`tu-icon--primary`;
 
-    case colors.SECONDARY:
+    case "secondary":
       return tws`tu-icon--secondary`;
 
-    case colors.ACCENT:
+    case "accent":
       return tws`tu-icon--accent`;
 
-    case colors.NEUTRAL:
+    case "neutral":
       return tws`tu-icon--neutral`;
 
-    case colors.INFO:
+    case "info":
       return tws`tu-icon--info`;
 
-    case colors.SUCCESS:
+    case "success":
       return tws`tu-icon--success`;
 
-    case colors.WARNING:
+    case "warning":
       return tws`tu-icon--warning`;
 
-    case colors.DANGER:
+    case "danger":
       return tws`tu-icon--danger`;
 
-    case colors.GOOD:
+    case "good":
       return tws`tu-icon--good`;
 
-    case colors.LOW:
+    case "low":
       return tws`tu-icon--low`;
 
-    case colors.CRITICAL:
+    case "critical":
       return tws`tu-icon--critical`;
 
-    case colors.WORKING:
+    case "working":
       return tws`tu-icon--working`;
 
-    case colors.IDLE:
+    case "idle":
       return tws`tu-icon--idle`;
 
-    case colors.STOPPED:
+    case "stopped":
       return tws`tu-icon--stopped`;
 
-    case colors.UNKNOWN:
+    case "unknown":
       return tws`tu-icon--unknown`;
 
     default:
@@ -2617,7 +2551,7 @@ const Indicator$1 = _a => {
     dataTestId,
     icon,
     label,
-    color = colors.UNKNOWN,
+    color = "unknown",
     withBackground = true,
     withLabel = true,
     ping = false
@@ -2650,67 +2584,67 @@ const Container$4 = tw.div`
   $color
 }) => {
   switch ($color) {
-    case colors.PRIMARY:
+    case "primary":
       return tws`tu-indicator--primary`;
 
-    case colors.SECONDARY:
+    case "secondary":
       return tws`tu-indicator--secondary`;
 
-    case colors.ACCENT:
+    case "accent":
       return tws`tu-indicator--accent`;
 
-    case colors.NEUTRAL:
+    case "neutral":
       return tws`tu-indicator--neutral`;
 
-    case colors.INFO:
+    case "info":
       return tws`tu-indicator--info`;
 
-    case colors.SUCCESS:
+    case "success":
       return tws`tu-indicator--success`;
 
-    case colors.WARNING:
+    case "warning":
       return tws`tu-indicator--warning`;
 
-    case colors.DANGER:
+    case "danger":
       return tws`tu-indicator--danger`;
 
-    case colors.GOOD:
+    case "good":
       return tws`tu-indicator--good`;
 
-    case colors.LOW:
+    case "low":
       return tws`tu-indicator--low`;
 
-    case colors.CRITICAL:
+    case "critical":
       return tws`tu-indicator--critical`;
 
-    case colors.WORKING:
+    case "working":
       return tws`tu-indicator--working`;
 
-    case colors.IDLE:
+    case "idle":
       return tws`tu-indicator--idle`;
 
-    case colors.STOPPED:
+    case "stopped":
       return tws`tu-indicator--stopped`;
 
-    case colors.UNKNOWN:
+    case "unknown":
       return tws`tu-indicator--unknown`;
 
-    case colors.ON_RENT:
+    case "on_rent":
       return tws`tu-indicator--on-rent`;
 
-    case colors.AVAILABLE:
+    case "available":
       return tws`tu-indicator--available`;
 
-    case colors.PICKUP_READY:
+    case "pickup_ready":
       return tws`tu-indicator--pickup-ready`;
 
-    case colors.TRANSFER:
+    case "transfer":
       return tws`tu-indicator--transfer`;
 
-    case colors.IN_REPAIR:
+    case "in_repair":
       return tws`tu-indicator--in-repair`;
 
-    case colors.OTHER_RENTAL_STATUS:
+    case "other_rental_status":
       return tws`tu-indicator--other-rental-status`;
 
     default:
@@ -4949,28 +4883,14 @@ const getScore = (value, min, max) => {
 
 const getDefaultFillColor = score => {
   if (score < 0.3) {
-    return getColorValue("--color-red-500");
+    return color("DANGER", 500, "CSS");
   }
 
   if (score >= 0.6) {
-    return getColorValue("--color-green-600");
-  }
-
-  return getColorValue("--color-amber-300");
-};
-/**
- * Helper function to get normalized color
- *
- * @param {number} levelColor - color, ex --color-green-600
- * @returns {string} normalized color value
- */
-
-const getNormalizedLevelColor = levelColor => {
-  if (levelColor.startsWith("--color")) {
-    return getColorValue(levelColor);
+    return color("SUCCESS", 600, "CSS");
   }
 
-  return levelColor;
+  return color("WARNING", 300, "CSS");
 };
 /**
  * Helper function to get custom color used by the ValueBar
@@ -4984,14 +4904,14 @@ const getFillColor = (score, levelColors) => {
   var _a, _b;
 
   if (levelColors.low && score < (levelColors.low.level || 0)) {
-    return getNormalizedLevelColor(levelColors.low.color);
+    return levelColors.low.color;
   }
 
   if (levelColors.high && score >= (levelColors.high.level || 0)) {
-    return getNormalizedLevelColor(levelColors.high.color);
+    return levelColors.high.color;
   }
 
-  return getNormalizedLevelColor((_b = (_a = levelColors.medium) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : "--color-amber-300");
+  return (_b = (_a = levelColors.medium) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : color("WARNING", 300);
 };
 /**
  * Helper function to get color used by the ValueBar
@@ -5054,7 +4974,7 @@ const ValueBar = ({
         "$size": size,
         x: `${barWidth + 2}%`,
         y: "11",
-        fill: valueColor !== null && valueColor !== void 0 ? valueColor : getColorValue("--color-neutral-400")
+        fill: valueColor !== null && valueColor !== void 0 ? valueColor : color("NEUTRAL", 400, "CSS")
       }, {
         children: [Number(value.toFixed(1)), unit || ""]
       }))]
@@ -5446,4 +5366,4 @@ const Layout = tw.div`
   tu-layout-TwoColumnLayout
 `;
 
-export { ActionButton, Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiSelectMenuItem, NumberField, NumberInput, PageHeader, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, SectionHeader, Select, SelectPrefix, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, activityColors, colors, criticalityColors, docs, generalColors, getOrderedOptions, getValueBarColorByValue, intentColors, isMultiValue, rentalStatusColors, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };
+export { ActionButton, Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiSelectMenuItem, NumberField, NumberInput, PageHeader, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, SectionHeader, Select, SelectPrefix, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, docs, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.164",
+  "version": "0.0.166",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
-    "@trackunit/css-core": "0.0.52",
+    "@trackunit/css-core": "0.0.54",
     "@trackunit/tailwind-styled-components": "0.0.46",
     "react": "17.0.2",
-    "@trackunit/ui-design-tokens": "0.0.44",
+    "@trackunit/ui-design-tokens": "0.0.46",
     "echarts-for-react": "^3.0.2",
     "echarts": "^5.4.0",
     "uuid": "^8.3.2",

package/constants/colors.d.ts

@@ -1,88 +0,0 @@
-/**
- * ? A collection of all the types and tokens related to the named colors in the default theme.
- */
-/**
- * The general color palette
- * Should be available in most if not all colored components
- */
-export declare const generalColors: {
-    readonly PRIMARY: "primary";
-    readonly SECONDARY: "secondary";
-    readonly ACCENT: "accent";
-    readonly NEUTRAL: "neutral";
-};
-export declare type GeneralColors = typeof colors[keyof typeof generalColors];
-/**
- * The intent color palette
- * Should be available for most colored components such as "Button", "Alert", "Indicator", "Badge"
- */
-export declare const intentColors: {
-    readonly INFO: "info";
-    readonly SUCCESS: "success";
-    readonly WARNING: "warning";
-    readonly DANGER: "danger";
-};
-export declare type IntentColors = typeof colors[keyof typeof intentColors];
-/**
- * The Criticality color palette
- * Should be available in any component that could be used to display the criticality of an asset or event
- */
-export declare const criticalityColors: {
-    readonly GOOD: "good";
-    readonly LOW: "low";
-    readonly CRITICAL: "critical";
-};
-export declare type CriticalityColors = typeof colors[keyof typeof criticalityColors];
-/**
- * The Activity color palette
- * Should be available in any component that could be used to display the Activity state of an asset
- */
-export declare const activityColors: {
-    readonly WORKING: "working";
-    readonly IDLE: "idle";
-    readonly STOPPED: "stopped";
-    readonly UNKNOWN: "unknown";
-};
-export declare type ActivityColors = typeof colors[keyof typeof activityColors];
-/**
- * The Rental status color palette
- * Should be available in any component that could be used to display the rental status of an asset
- */
-export declare const rentalStatusColors: {
-    readonly ON_RENT: "ON_RENT";
-    readonly RETURNED: "RETURNED";
-    readonly AVAILABLE: "AVAILABLE";
-    readonly PICKUP_READY: "PICKUP_READY";
-    readonly TRANSFER: "TRANSFER";
-    readonly IN_REPAIR: "IN_REPAIR";
-    readonly OTHER_RENTAL_STATUS: "OTHER_RENTAL_STATUS";
-};
-export declare type RentalStatusColors = typeof colors[keyof typeof rentalStatusColors];
-/**
- * The full color palette
- */
-export declare const colors: {
-    readonly ON_RENT: "ON_RENT";
-    readonly RETURNED: "RETURNED";
-    readonly AVAILABLE: "AVAILABLE";
-    readonly PICKUP_READY: "PICKUP_READY";
-    readonly TRANSFER: "TRANSFER";
-    readonly IN_REPAIR: "IN_REPAIR";
-    readonly OTHER_RENTAL_STATUS: "OTHER_RENTAL_STATUS";
-    readonly WORKING: "working";
-    readonly IDLE: "idle";
-    readonly STOPPED: "stopped";
-    readonly UNKNOWN: "unknown";
-    readonly GOOD: "good";
-    readonly LOW: "low";
-    readonly CRITICAL: "critical";
-    readonly INFO: "info";
-    readonly SUCCESS: "success";
-    readonly WARNING: "warning";
-    readonly DANGER: "danger";
-    readonly PRIMARY: "primary";
-    readonly SECONDARY: "secondary";
-    readonly ACCENT: "accent";
-    readonly NEUTRAL: "neutral";
-};
-export declare type Colors = typeof colors[keyof typeof colors];

package/constants/index.d.ts

@@ -1 +0,0 @@
-export * from "./colors";