diginet-core-ui 1.4.14-beta.2 → 1.4.14-beta.3

package/components/card/footer.js

@@ -1,18 +1,26 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import useThemeProps from "../../theme/utils/useThemeProps";
 import { classNames, refType as ref } from "../../utils";
-const CardFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  children,
-  className,
-  id,
-  style,
-  title
-}, reference) => {
+const CardFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+  if (!reference) reference = useRef(null);
+
+  // props priority: `inProps` > `themeDefaultProps`
+  const props = useThemeProps({
+    props: inProps,
+    name: 'CardFooter'
+  });
+  const {
+    action = {},
+    children,
+    className,
+    id,
+    style
+  } = props;
   const ref = useRef(null);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -31,12 +39,14 @@ const CardFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       style: style,
       className: classNames(`DGN-UI-Card-Footer`, className)
     }, children);
-  }, [children, className, id, style, title]);
+  }, [children, className, id, style]);
 }));
-CardFooter.defaultProps = {
-  className: '',
-  style: {}
-};
+
+// CardFooter.defaultProps = {
+//     className: '',
+//     style: {},
+// };
+
 CardFooter.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
@@ -46,19 +56,19 @@ CardFooter.propTypes = {
   style: PropTypes.object,
   /** The title of the component's header. */
   title: PropTypes.string,
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   ref: ref
 };

package/components/card/header.js

@@ -1,19 +1,28 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
+import { Typography } from "./..";
 import OptionWrapper from "../others/option-wrapper";
-import Typography from "../typography";
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import useThemeProps from "../../theme/utils/useThemeProps";
 import { classNames, refType as ref } from "../../utils";
-const CardHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  children,
-  className,
-  id,
-  style,
-  title
-}, reference) => {
+const CardHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+  if (!reference) reference = useRef(null);
+
+  // props priority: `inProps` > `themeDefaultProps`
+  const props = useThemeProps({
+    props: inProps,
+    name: 'CardHeader'
+  });
+  const {
+    action = {},
+    children,
+    className,
+    id,
+    style,
+    title
+  } = props;
   const ref = useRef(null);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -36,10 +45,12 @@ const CardHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, title));
   }, [children, className, id, style, title]);
 }));
-CardHeader.defaultProps = {
-  className: '',
-  style: {}
-};
+
+// CardHeader.defaultProps = {
+//     className: '',
+//     style: {},
+// };
+
 CardHeader.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
@@ -49,19 +60,19 @@ CardHeader.propTypes = {
   style: PropTypes.object,
   /** The title of the component's header. */
   title: PropTypes.string,
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   ref: ref
 };

package/components/card/index.js

@@ -1,49 +1,51 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
-import theme from "../../theme/settings";
-import { boxBorder, borderRadius4px, flexCol, flexRow, justifyEnd, overflowHidden, parseWidth, parseWidthHeight, positionAbsolute, positionRelative } from "../../styles/general";
-import CardHeader from "./header";
-import { CardFooter } from "./footer";
-import { CardBody } from "./body";
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import { bgColor, borderRadius4px, boxBorder, flexCol, flexRow, justifyEnd, overflowHidden, parseWidth, parseWidthHeight, positionAbsolute, positionRelative } from "../../styles/general";
 import { getColor } from "../../styles/utils";
-import { classNames, refType as ref } from "../../utils";
-const {
-  colors: {
-    system: {
-      white
-    },
-    line: {
-      category
-    }
-  },
-  spacing
-} = theme;
-const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  body: bodyProp,
-  bodyStyle,
-  children,
-  className,
-  dividerColor,
-  direction,
-  footer,
-  footerDivider,
-  footerStyle,
-  header,
-  headerDivider,
-  headerStyle,
-  height,
-  id,
-  style,
-  title,
-  width
-}, reference) => {
+import { useTheme } from "../../theme";
+import { classNames, getProp, refType as ref } from "../../utils";
+import { CardBody } from "./body";
+import { CardFooter } from "./footer";
+import CardHeader from "./header";
+import useThemeProps from "../../theme/utils/useThemeProps";
+const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+  if (!reference) reference = useRef(null);
+  const theme = useTheme();
+  const {
+    colors
+  } = theme;
+
+  // props priority: `inProps` > `themeDefaultProps`
+  const props = useThemeProps({
+    props: inProps,
+    name: 'Card'
+  });
+  const {
+    action = {},
+    body: bodyProp,
+    bodyStyle,
+    children,
+    className,
+    dividerColor,
+    direction,
+    footer,
+    footerDivider,
+    footerStyle,
+    header,
+    headerDivider,
+    headerStyle,
+    height,
+    id,
+    style,
+    title,
+    width
+  } = props;
   const ref = useRef(null);
-  const _CardCSS = CardCSS(width, height, headerDivider, footerDivider, dividerColor, direction);
+  const _CardCSS = CardCSS(width, height, headerDivider, footerDivider, getProp(colors, dividerColor, dividerColor), direction, theme);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -77,15 +79,18 @@ const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, head, body || children, foot);
   }, [bodyProp, bodyStyle, children, className, dividerColor, direction, footer, footerDivider, footerStyle, header, headerDivider, headerStyle, height, id, style, title, width]);
 }));
-const CardCSS = (width, height, headerDivider, footerDivider, dividerColor, direction) => css`
+const CardCSS = (width, height, headerDivider, footerDivider, dividerColor, direction, {
+  colors,
+  spacing
+}) => css`
     ${direction === 'vertical' ? flexCol : flexRow};
     ${positionRelative};
     ${boxBorder};
     ${borderRadius4px};
     ${overflowHidden}
-    ${parseWidthHeight(width || spacing([64.5]), height || 'max-content')};
+    ${parseWidthHeight(width, height)};
     ${parseWidth(width)};
-    background: ${white};
+    ${bgColor(getProp(colors, 'system/standard'))};
     .DGN-UI-Card-Header {
         ${flexRow};
         ${positionRelative};
@@ -107,7 +112,7 @@ const CardCSS = (width, height, headerDivider, footerDivider, dividerColor, dire
         ${positionRelative};
         ${boxBorder};
         order: 2;
-        padding: ${headerDivider ? spacing([4]) : spacing([0, 4, 4])};
+        padding: ${spacing(headerDivider ? [4] : [0, 4, 4])};
     }
     .DGN-UI-Card-Footer {
         ${flexRow};
@@ -115,7 +120,7 @@ const CardCSS = (width, height, headerDivider, footerDivider, dividerColor, dire
         ${positionRelative};
         ${boxBorder};
         order: 3;
-        padding: ${footerDivider ? spacing([4]) : spacing([0, 4, 4])};
+        padding: ${spacing(footerDivider ? [4] : [0, 4, 4])};
         &:before {
             ${positionAbsolute};
             content: '';
@@ -132,17 +137,21 @@ const CardCSS = (width, height, headerDivider, footerDivider, dividerColor, dire
         ${boxBorder};
     }
 `;
-Card.defaultProps = {
-  bodyStyle: {},
-  className: '',
-  dividerColor: category,
-  direction: 'vertical',
-  footerDivider: false,
-  footerStyle: {},
-  headerDivider: true,
-  headerStyle: {},
-  style: {}
-};
+
+// Card.defaultProps = {
+//     bodyStyle: {},
+//     className: '',
+//     dividerColor: 'line/category',
+//     direction: 'vertical',
+//     footerDivider: false,
+//     footerStyle: {},
+//     headerDivider: true,
+//     headerStyle: {},
+//     style: {},
+//     width: 258,
+//     height: 'max-content',
+// };
+
 Card.propTypes = {
   /** The content of the component's body. */
   body: PropTypes.node,
@@ -174,19 +183,19 @@ Card.propTypes = {
   title: PropTypes.string,
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   ref: ref
 };

package/components/chart/bar/Labels.js

@@ -1,15 +1,15 @@
 /* eslint-disable react/prop-types */
 /** @jsxRuntime classic */
 /** @jsx jsx */
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import theme from "../../../theme/settings";
-import { typography } from "../../../styles/typography";
+import { useTheme } from "../../../theme";
+import { getProp } from "../../../utils";
 const Labels = ({
   getX,
   getY,
   data,
-  labelsColor,
+  labelsColor: labelsColorProp,
   labelsCountY,
   labelsFormatX,
   viewBoxWidth,
@@ -23,6 +23,12 @@ const Labels = ({
   minX,
   unitWidth
 }) => {
+  const theme = useTheme();
+  const {
+    colors,
+    typography
+  } = theme;
+  const labelsColor = getProp(colors, labelsColorProp, labelsColorProp);
   const labelContainerCSS = css`
         transform: translate(0, ${labelsOffsetX}px);
     `;
@@ -32,7 +38,7 @@ const Labels = ({
         text-align: center;
     `;
   const LabelCSS = labelStyle === 'italic' ? css`
-                  fill: ${theme.colors.system.rest};
+                  fill: ${getProp(colors, 'system/rest')};
                   text-anchor: start;
                   ${typography.paragraph3};
                   text-transform: capitalize;
@@ -41,7 +47,7 @@ const Labels = ({
                   transform-box: fill-box;
                   transform: rotateZ(45deg);
               ` : css`
-                  color: ${theme.colors.system.rest};
+                  color: ${getProp(colors, 'system/rest')};
                   text-anchor: middle;
                   ${typography.paragraph3};
                   text-transform: capitalize;
@@ -51,7 +57,7 @@ const Labels = ({
               `;
   const TextCSS = css`
         ${typography.paragraph3};
-        fill: ${theme.colors.system.rest};
+        fill: ${getProp(colors, 'system/rest')};
         cursor: 'pointer';
     `;
   if (labelsVisible) {
@@ -112,7 +118,7 @@ Labels.defaultProps = {
   getX: x => x,
   getY: quantity => quantity,
   labelsCharacterWidth: 10,
-  labelsColor: theme.colors.system.rest,
+  labelsColor: 'system/rest',
   labelsCountY: 5,
   labelsFormatX: label => label,
   labelsFormatY: quantity => quantity,

package/components/chart/bar-v2/Labels.js

@@ -1,15 +1,15 @@
 /* eslint-disable react/prop-types */
 /** @jsxRuntime classic */
 /** @jsx jsx */
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import theme from "../../../theme/settings";
-import { typography } from "../../../styles/typography";
+import { useTheme } from "../../../theme";
+import { getProp } from "../../../utils";
 const Labels = ({
   getX,
   getY,
   data,
-  labelsColor,
+  labelsColor: labelsColorProp,
   labelsCountY,
   labelsFormatX,
   viewBoxWidth,
@@ -23,6 +23,12 @@ const Labels = ({
   minX,
   unitWidth
 }) => {
+  const theme = useTheme();
+  const {
+    colors,
+    typography
+  } = theme;
+  const labelsColor = getProp(colors, labelsColorProp, labelsColorProp);
   const labelContainerCSS = css`
         transform: translate(0, ${labelsOffsetX}px);
     `;
@@ -32,7 +38,7 @@ const Labels = ({
         text-align: center;
     `;
   const LabelCSS = labelStyle === 'italic' ? css`
-                  fill: ${theme.colors.system.rest};
+                  fill: ${getProp(colors, 'system/rest')};
                   text-anchor: start;
                   ${typography.paragraph3};
                   text-transform: capitalize;
@@ -41,7 +47,7 @@ const Labels = ({
                   transform-box: fill-box;
                   transform: rotateZ(45deg);
               ` : css`
-                  color: ${theme.colors.system.rest};
+                  color: ${getProp(colors, 'system/rest')};
                   text-anchor: middle;
                   ${typography.paragraph3};
                   text-transform: capitalize;
@@ -51,7 +57,7 @@ const Labels = ({
               `;
   const TextCSS = css`
         ${typography.paragraph3};
-        fill: ${theme.colors.system.rest};
+        fill: ${getProp(colors, 'system/rest')};
         cursor: 'pointer';
     `;
   if (labelsVisible) {
@@ -112,7 +118,7 @@ Labels.defaultProps = {
   getX: x => x,
   getY: quantity => quantity,
   labelsCharacterWidth: 10,
-  labelsColor: theme.colors.system.rest,
+  labelsColor: 'system/rest',
   labelsCountY: 5,
   labelsFormatX: label => label,
   labelsFormatY: quantity => quantity,

package/components/chart/line/Labels.js

@@ -1,15 +1,15 @@
 /* eslint-disable react/prop-types */
 /** @jsxRuntime classic */
 /** @jsx jsx */
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import theme from "../../../theme/settings";
-import { typography } from "../../../styles/typography";
+import { useTheme } from "../../../theme";
+import { getProp } from "../../../utils";
 const Labels = ({
   getX,
   getY,
   data,
-  labelsColor,
+  labelsColor: labelsColorProp,
   labelsCountY,
   labelsFormatX,
   labelsFormatY,
@@ -22,6 +22,12 @@ const Labels = ({
   minX,
   unitWidth
 }) => {
+  const theme = useTheme();
+  const {
+    colors,
+    typography
+  } = theme;
+  const labelsColor = getProp(colors, labelsColorProp, labelsColorProp);
   const labelContainerCSS = css`
         transform: translate(0, ${labelsOffsetX}px);
     `;
@@ -31,7 +37,7 @@ const Labels = ({
         text-align: center;
     `;
   const LabelCSS = labelStyle === 'italic' ? css`
-                  fill: ${theme.colors.system.rest};
+                  fill: ${getProp(colors, 'system/rest')};
                   text-anchor: start;
                   ${typography.paragraph3};
                   text-transform: capitalize;
@@ -40,7 +46,7 @@ const Labels = ({
                   transform-box: fill-box;
                   transform: rotateZ(45deg);
               ` : css`
-                  color: ${theme.colors.system.rest};
+                  color: ${getProp(colors, 'system/rest')};
                   text-anchor: middle;
                   ${typography.paragraph3};
                   text-transform: capitalize;
@@ -49,7 +55,7 @@ const Labels = ({
               `;
   const TextCSS = css`
         ${typography.paragraph3};
-        fill: ${theme.colors.system.rest};
+        fill: ${getProp(colors, 'system/rest')};
     `;
   if (labelsVisible) {
     let xLabels;
@@ -110,7 +116,7 @@ Labels.defaultProps = {
   getX: x => x,
   getY: quantity => quantity,
   labelsCharacterWidth: 10,
-  labelsColor: theme.colors.system.rest,
+  labelsColor: 'system/rest',
   labelsCountY: 5,
   labelsFormatX: label => label,
   labelsFormatY: quantity => quantity,

package/components/chart/line/Path.js

@@ -3,7 +3,7 @@
 /** @jsx jsx */
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { useColor as colors } from "../../../theme";
+import { getColor } from "../../../styles/utils";
 const Path = ({
   data,
   getX,
@@ -27,13 +27,13 @@ const Path = ({
   // });
 
   const PathCSS = css`
-        stroke: ${colors[pathColor] || pathColor};
+        stroke: ${getColor(pathColor)};
         stroke-width: ${STROKE};
         stroke-linecap: round;
         stroke-linejoin: round;
         /* &:hover {
             cursor: pointer;
-            stroke: ${colors[pathColor] || pathColor};
+            stroke: ${getColor(pathColor)};
             stroke-linecap: round;
             stroke-linejoin: round;
             stroke-width: ${STROKEHover};

package/components/chart/line/Point.js

@@ -4,7 +4,8 @@
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { typography } from "../../../styles/typography";
-import { useColor as colors } from "../../../theme";
+import { fill } from "../../../styles/general";
+import { getColor } from "../../../styles/utils";
 const Points = ({
   data,
   getX,
@@ -27,13 +28,13 @@ const Points = ({
   pointHoverAlignment
 }) => {
   const PointCSS = css`
-        fill: ${colors[pointsColor] || pointsColor};
+        ${fill(pointsColor)};
         stroke: ${pointsStrokeColor};
         stroke-width: ${strokeWidth};
         &:hover {
             cursor: pointer;
             fill: #fff;
-            stroke: ${colors[pointsColor] || pointsColor};
+            stroke: ${getColor(pointsColor)};
             stroke-width: ${pointsStrokeHover};
         }
     `;
@@ -170,8 +171,8 @@ const Points = ({
       transform: `translate(${getX(point.x + unitWidth / 1.5) + 4}, ${getY(point.quantity)})`
     }, jsx("path", {
       d: rightTooltipPath(Width, 20, 6, 4),
-      fill: colors[pointsColor] || pointsColor,
-      stroke: colors[pointsColor] || pointsColor,
+      fill: getColor(pointsColor),
+      stroke: getColor(pointsColor),
       style: {
         filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15))'
       }
@@ -191,8 +192,8 @@ const Points = ({
       transform: `translate(${getX(point.x + unitWidth / 1.5) - 4}, ${getY(point.quantity)})`
     }, jsx("path", {
       d: leftTooltipPath(Width, 20, 6, 4),
-      fill: colors[pointsColor] || pointsColor,
-      stroke: colors[pointsColor] || pointsColor,
+      fill: getColor(pointsColor),
+      stroke: getColor(pointsColor),
       style: {
         filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15))'
       }
@@ -212,8 +213,8 @@ const Points = ({
       transform: `translate(${getX(point.x + unitWidth / 1.5)}, ${getY(point.quantity) - 4})`
     }, jsx("path", {
       d: topTooltipPath(Width, 20, 6, 4),
-      fill: colors[pointsColor] || pointsColor,
-      stroke: colors[pointsColor] || pointsColor,
+      fill: getColor(pointsColor),
+      stroke: getColor(pointsColor),
       style: {
         filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15))'
       }
@@ -232,8 +233,8 @@ const Points = ({
       transform: `translate(${getX(point.x + unitWidth / 1.5)}, ${getY(point.quantity) + 4})`
     }, jsx("path", {
       d: bottomTooltipPath(Width, 20, 6, 4),
-      fill: colors[pointsColor] || pointsColor,
-      stroke: colors[pointsColor] || pointsColor,
+      fill: getColor(pointsColor),
+      stroke: getColor(pointsColor),
       style: {
         filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15))'
       }