@auth0/quantum-charts 0.0.4 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-charts",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "sideEffects": false,
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -29,22 +29,24 @@
     "build": "yarn clean && yarn build:cjs && yarn build:esm && yarn copy:files",
     "clean": "rm -rf ./build",
     "watch": "tsc --watch --project ./tsconfig.publish.esm.json & tsc --watch --project ./tsconfig.publish.json",
-    "build:cjs": "tsc --project ./tsconfig.publish.json",
-    "build:esm": "tsc --project ./tsconfig.publish.esm.json",
+    "build:cjs": "node --max-old-space-size=4096 ../../node_modules/.bin/tsc --project ./tsconfig.publish.json",
+    "build:esm": "node --max-old-space-size=4096 ../../node_modules/.bin/tsc --project ./tsconfig.publish.esm.json",
     "copy:files": "node scripts/copy-files.js",
     "artifactory": "cd ./build && npm publish",
-    "storybook": "start-storybook -p 6006"
+    "storybook": "storybook dev -p 6006"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@storybook/addon-actions": "6.5.10",
-    "@storybook/addon-essentials": "6.5.10",
-    "@storybook/addon-links": "6.5.10",
-    "@storybook/react": "6.5.10",
-    "@storybook/theming": "6.5.10",
+    "@babel/core": "^7.22.10",
+    "@storybook/addon-actions": "^7.3.2",
+    "@storybook/addon-essentials": "^7.3.2",
+    "@storybook/addon-links": "^7.3.2",
+    "@storybook/react": "^7.3.2",
+    "@storybook/react-webpack5": "7.3.2",
+    "@storybook/theming": "^7.3.2",
     "@types/md5": "^2.3.2",
-    "@types/node": "12.12.47",
-    "babel-loader": "^8.2.2"
+    "@types/node": "^18.16.19",
+    "babel-loader": "^9.1.3",
+    "storybook": "7.3.2"
   },
   "module": "./esm/index.js"
 }

package/styles.d.ts

@@ -2,7 +2,6 @@ export declare type IChartContainerProps = {
     height?: number | 'initial';
     marginTop?: number;
 };
-export declare const ChartContainer: import("styled-components").StyledComponent<"div", any, IChartContainerProps, never>;
-export declare const CustomTooltip: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CustomTooltipLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const DefaultCursorBox: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").BoxTypeMap<{}, "div">>, any, {}, never>;
+export declare const ChartContainer: import("styled-components").StyledComponent<"div", import("@auth0/quantum-product").ITheme, import("@mui/system").MUIStyledCommonProps<import("@auth0/quantum-product").ITheme> & IChartContainerProps, never>;
+export declare const CustomTooltip: import("styled-components").StyledComponent<"div", import("@auth0/quantum-product").ITheme, import("@mui/system").MUIStyledCommonProps<import("@auth0/quantum-product").ITheme>, never>;
+export declare const DefaultCursorBox: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").BoxTypeMap<{}, "div">>, import("@auth0/quantum-product").ITheme, import("@mui/system").MUIStyledCommonProps<import("@auth0/quantum-product").ITheme>, never>;

package/styles.js

@@ -3,14 +3,10 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultCursorBox = exports.CustomTooltipLabel = exports.CustomTooltip = exports.ChartContainer = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
+exports.DefaultCursorBox = exports.CustomTooltip = exports.ChartContainer = void 0;
 var quantum_product_1 = require("@auth0/quantum-product");
-exports.ChartContainer = styled_components_1.default.div(function (_a) {
+exports.ChartContainer = (0, quantum_product_1.styled)('div')(function (_a) {
     var theme = _a.theme, height = _a.height, marginTop = _a.marginTop;
     var props = {
         marginTop: theme.spacing(3),
@@ -24,20 +20,21 @@ exports.ChartContainer = styled_components_1.default.div(function (_a) {
     }
     return props;
 });
-exports.CustomTooltip = styled_components_1.default.div(function (_a) {
+exports.CustomTooltip = (0, quantum_product_1.styled)('div')(function (_a) {
     var theme = _a.theme;
     return ({
-        backgroundColor: theme.tokens.color_bg_layer_boldest,
+        display: 'grid',
+        gap: theme.spacing(1),
+        backgroundColor: theme.tokens.color_bg_layer_elevated,
+        border: "1px solid ".concat(theme.tokens.color_border_bold),
         borderRadius: theme.shape.borderRadius,
-        padding: theme.spacing(1, 3),
-        color: theme.tokens.color_fg_inverse,
+        padding: theme.spacing(1, 2),
+        color: theme.tokens.color_fg_bold,
         fontSize: theme.typography.caption.fontSize,
         fontWeight: theme.typography.caption.fontWeight,
         lineHeight: theme.typography.caption.lineHeight,
         letterSpacing: theme.typography.caption.letterSpacing,
     });
 });
-// `textSecondary` doesn't have enough contrast for the black background of the tooltip
-exports.CustomTooltipLabel = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: lightgrey;\n"], ["\n  color: lightgrey;\n"])));
-exports.DefaultCursorBox = (0, styled_components_1.default)(quantum_product_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
-var templateObject_1, templateObject_2;
+exports.DefaultCursorBox = (0, quantum_product_1.styled)(quantum_product_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
+var templateObject_1;

package/theme.d.ts

@@ -1,3 +1,11 @@
 import { ITheme } from '@auth0/quantum-product';
-export declare const getBaseColorScale: ({ palette }: ITheme) => string[];
-export declare const getBaseColorScaleMuted: ({ palette }: ITheme) => string[];
+export declare const getColorScale: ({ tokens }: ITheme) => {
+    categorical: {
+        base: string[];
+        muted: string[];
+    };
+    sequential: {
+        base: string[];
+        muted: string[];
+    };
+};

package/theme.js

@@ -1,27 +1,42 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBaseColorScaleMuted = exports.getBaseColorScale = void 0;
-var getBaseColorScale = function (_a) {
-    var palette = _a.palette;
-    return [
-        palette.purple[500],
-        palette.magenta[500],
-        palette.green[500],
-        palette.yellow[500],
-        palette.red[500],
-        palette.neutral[500],
-    ];
+exports.getColorScale = void 0;
+var quantum_product_1 = require("@auth0/quantum-product");
+var getColorScale = function (_a) {
+    var tokens = _a.tokens;
+    return {
+        categorical: {
+            base: [
+                tokens.color_chart_categorical_1,
+                tokens.color_chart_categorical_2,
+                tokens.color_chart_categorical_3,
+                tokens.color_chart_categorical_4,
+                tokens.color_chart_categorical_5,
+                tokens.color_chart_categorical_6,
+            ],
+            muted: [
+                (0, quantum_product_1.alpha)(tokens.color_chart_categorical_1, 0.35),
+                (0, quantum_product_1.alpha)(tokens.color_chart_categorical_2, 0.35),
+                (0, quantum_product_1.alpha)(tokens.color_chart_categorical_3, 0.35),
+                (0, quantum_product_1.alpha)(tokens.color_chart_categorical_4, 0.35),
+                (0, quantum_product_1.alpha)(tokens.color_chart_categorical_5, 0.35),
+                (0, quantum_product_1.alpha)(tokens.color_chart_categorical_6, 0.35),
+            ],
+        },
+        sequential: {
+            base: [
+                tokens.color_chart_sequential_1,
+                tokens.color_chart_sequential_2,
+                tokens.color_chart_sequential_3,
+                tokens.color_chart_sequential_4,
+            ],
+            muted: [
+                (0, quantum_product_1.alpha)(tokens.color_chart_sequential_1, 0.35),
+                (0, quantum_product_1.alpha)(tokens.color_chart_sequential_2, 0.35),
+                (0, quantum_product_1.alpha)(tokens.color_chart_sequential_3, 0.35),
+                (0, quantum_product_1.alpha)(tokens.color_chart_sequential_4, 0.35),
+            ],
+        },
+    };
 };
-exports.getBaseColorScale = getBaseColorScale;
-var getBaseColorScaleMuted = function (_a) {
-    var palette = _a.palette;
-    return [
-        palette.purple[300],
-        palette.yellow[300],
-        palette.green[300],
-        palette.red[300],
-        palette.neutral[300],
-        palette.magenta[300],
-    ];
-};
-exports.getBaseColorScaleMuted = getBaseColorScaleMuted;
+exports.getColorScale = getColorScale;

package/esm/line-chart/custom-tooltip.js

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { Box, RowLayout } from '@auth0/quantum-product';
-import StatusDot from '../custom-color-status-dot';
-import { format } from 'date-fns';
-import { CustomTooltip as CustomTooltipStyled, CustomTooltipLabel } from '../styles';
-// -------------------------------- Component --------------------------------
-var CustomTooltip = function (_a) {
-    var _b;
-    var active = _a.active, payload = _a.payload;
-    if (!active || !payload.length) {
-        return null;
-    }
-    return (React.createElement(CustomTooltipStyled, null,
-        React.createElement(CustomTooltipLabel, null, "".concat(format(new Date(payload && ((_b = payload[0].payload) === null || _b === void 0 ? void 0 : _b.date)), 'LLL d p'))),
-        React.createElement(Box, null,
-            React.createElement(RowLayout, { gutter: 1 }, payload.map(function (x, index) {
-                return React.createElement(StatusDot, { key: index, dotColor: 'grey', label: "".concat(x.name, ": ").concat(x.payload[x.name]) });
-            })))));
-};
-export default CustomTooltip;

package/line-chart/custom-tooltip.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-declare const CustomTooltip: ({ active, payload }: {
-    active: any;
-    payload: any;
-}) => JSX.Element | null;
-export default CustomTooltip;

package/line-chart/custom-tooltip.js

@@ -1,48 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
-var quantum_product_1 = require("@auth0/quantum-product");
-var custom_color_status_dot_1 = __importDefault(require("../custom-color-status-dot"));
-var date_fns_1 = require("date-fns");
-var styles_1 = require("../styles");
-// -------------------------------- Component --------------------------------
-var CustomTooltip = function (_a) {
-    var _b;
-    var active = _a.active, payload = _a.payload;
-    if (!active || !payload.length) {
-        return null;
-    }
-    return (React.createElement(styles_1.CustomTooltip, null,
-        React.createElement(styles_1.CustomTooltipLabel, null, "".concat((0, date_fns_1.format)(new Date(payload && ((_b = payload[0].payload) === null || _b === void 0 ? void 0 : _b.date)), 'LLL d p'))),
-        React.createElement(quantum_product_1.Box, null,
-            React.createElement(quantum_product_1.RowLayout, { gutter: 1 }, payload.map(function (x, index) {
-                return React.createElement(custom_color_status_dot_1.default, { key: index, dotColor: 'grey', label: "".concat(x.name, ": ").concat(x.payload[x.name]) });
-            })))));
-};
-exports.default = CustomTooltip;