@ntbjs/react-components 2.0.0-rc.13 → 2.0.0-rc.27

package/build/widgets/ProgressBar/ProgressBar.js

@@ -0,0 +1,210 @@
+import { _ as _extends } from '../../_rollupPluginBabelHelpers-c245b26a.js';
+import React__default, { useState } from 'react';
+import { a as applyDefaultTheme, P as PropTypes } from '../../defaultTheme-1bcc2541.js';
+import styled from 'styled-components';
+import { S as SvgArrowForward } from '../../arrow-forward-ad12c5f3.js';
+
+const getBackgroundColor = props => {
+  if (props.barColor) {
+    return `background: ${props.barColor};`;
+  }
+  const colorMap = {
+    success: ['emerald-600', 'emerald-300'],
+    error: ['red-600', 'cercise-200'],
+    warning: ['orange-600', 'orange-400'],
+    none: ['gray-500', 'gray-300'],
+    default: ['emerald-600', 'emerald-500']
+  };
+  const [darkColor, lightColor] = colorMap[props.type] || colorMap.default;
+  return props.theme.themeProp('background', props.theme.getColor(darkColor), props.theme.getColor(lightColor));
+};
+styled.p.attrs(applyDefaultTheme)`
+  font-family: ${props => props.theme.primaryFontFamily};
+  font-size: 1rem;
+  font-weight: 500;
+`;
+const Container = styled.div.attrs(applyDefaultTheme)`
+  width: 100%;
+  height: ${props => props.height ? `${props.height}px` : '50px'};
+  font-family: ${props => props.theme.primaryFontFamily};
+`;
+const InnerContainer = styled.div.attrs(applyDefaultTheme)`
+  display: flex;
+  height: 100%;
+`;
+const MetricsContainer = styled.div.attrs(applyDefaultTheme)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: ${props => props.hasLink ? '85%' : '100%'};
+  height: 100%;
+  flex-direction: row;
+  justify-content: flex-start;
+`;
+const Label = styled.div.attrs(applyDefaultTheme)`
+  font-size: 0.875rem;
+  padding-bottom: 5px;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))}
+`;
+styled.div.attrs(applyDefaultTheme)`
+  font-size: 0.875rem;
+  font-weight: 500;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))}
+`;
+const ProgressBarTrack = styled.div.attrs(applyDefaultTheme)`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 3px;
+  height: 100%;
+  ${props => props.theme.themeProp('background', props.theme.getColor('gray-800'), props.theme.getColor('gray-50'))}
+`;
+const Completed = styled.div.attrs(applyDefaultTheme)`
+  font-size: 1.2rem;
+  font-weight: 400;
+  height: 100%;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  width: 96px;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-800'))};
+`;
+const PercentageIndicator = styled.div.attrs(applyDefaultTheme)`
+  position: absolute;
+  right: 10px;
+  font-weight: 400;
+  font-size: 0.875rem;
+  white-space: nowrap;
+  opacity: 0.8;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'))};
+`;
+const ExternalPercentageIndicator = styled.div.attrs(applyDefaultTheme)`
+  margin-left: 8px;
+  font-size: 1.2rem;
+  font-weight: 400;
+  font-size: 0.875rem;
+  opacity: 0.9;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'))};
+  display: flex;
+  align-items: center;
+`;
+const ProgressBarFill = styled.div.attrs(applyDefaultTheme)`
+  height: 100%;
+  border-radius: 0 3px 3px 0;
+  width: ${props => props.percentage}%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  ${props => getBackgroundColor(props)}
+  transition: width 0.3s ease;
+`;
+const Link = styled.div.attrs(applyDefaultTheme)`
+  font-size: 0.875rem;
+  font-weight: 400;
+  width: 15%;
+  opacity: 0.7;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-right: 20px;
+  cursor: pointer;
+  height: 100%;
+  gap: 10px;
+  svg {
+    transition: transform 0.2s ease-in-out;
+  }
+  &:hover svg {
+    transform: translateX(2px);
+  }
+`;
+const ButtonLink = styled.div.attrs(applyDefaultTheme)`
+  font-size: 0.875rem;
+  font-weight: 500;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  opacity: ${props => props.$isHovered ? 1 : 0.8};
+  transition: color 0.2s ease-in-out;
+  ${props => props.$isHovered ? props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')) : props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};
+`;
+const StyledArrowIcon = styled(SvgArrowForward).attrs(applyDefaultTheme)`
+  height: 15px;
+  margin-right: 10px;
+  opacity: ${props => props.$isHovered ? 1 : 0.8};
+  transition: transform 0.2s ease-in-out, fill 0.2s ease-in-out;
+  transform: ${props => props.$isHovered ? 'translateX(2px)' : 'translateX(0)'};
+
+  ${props => props.$isHovered ? props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black')) : props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black'))};
+`;
+
+const ProgressBar = ({
+  totalAssets,
+  completedAssets,
+  percentageText,
+  barColor,
+  height,
+  label,
+  type,
+  linkText,
+  onClick,
+  ...props
+}) => {
+  const [isLinkHovered, setIsLinkHovered] = useState(false);
+  const safeCompletedAssets = Math.max(0, completedAssets);
+  const safeTotalAssets = Math.max(1, totalAssets);
+  const percentage = safeCompletedAssets / safeTotalAssets * 100;
+  const formattedPercentage = `${Math.round(percentage)}%`;
+  const isLowPercentage = percentage <= 5;
+  const handleLinkClick = e => onClick(e);
+  const formatNumberNew = num => {
+    if (num < 1000000) {
+      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+    } else {
+      const units = ['K', 'M', 'B', 'T'];
+      const unit = Math.floor((num.toString().length - 1) / 3) - 1;
+      const shortNum = num / Math.pow(1000, unit + 1);
+      return shortNum.toFixed(shortNum < 10 ? 1 : 0) + units[unit];
+    }
+  };
+  return React__default.createElement(Container, _extends({
+    height: height
+  }, props), React__default.createElement(Label, null, label), React__default.createElement(InnerContainer, {
+    type: type
+  }, React__default.createElement(Completed, {
+    type: type
+  }, formatNumberNew(completedAssets)), React__default.createElement(ProgressBarTrack, null, React__default.createElement(MetricsContainer, {
+    hasLink: Boolean(linkText)
+  }, React__default.createElement(ProgressBarFill, {
+    type: type,
+    percentage: percentage,
+    barColor: barColor
+  }, !isLowPercentage && React__default.createElement(PercentageIndicator, {
+    hasLink: Boolean(linkText)
+  }, percentageText || formattedPercentage)), isLowPercentage && React__default.createElement(ExternalPercentageIndicator, null, percentageText || formattedPercentage)), linkText && React__default.createElement(Link, {
+    onClick: handleLinkClick,
+    onMouseEnter: () => setIsLinkHovered(true),
+    onMouseLeave: () => setIsLinkHovered(false)
+  }, React__default.createElement(ButtonLink, {
+    $isHovered: isLinkHovered
+  }, linkText), React__default.createElement(StyledArrowIcon, {
+    $isHovered: isLinkHovered
+  })))));
+};
+ProgressBar.propTypes = process.env.NODE_ENV !== "production" ? {
+  totalAssets: PropTypes.number.isRequired,
+  completedAssets: PropTypes.number.isRequired,
+  percentageText: PropTypes.string,
+  barColor: PropTypes.string,
+  height: PropTypes.number,
+  label: PropTypes.string,
+  type: PropTypes.string,
+  linkText: PropTypes.string,
+  onClick: PropTypes.func
+} : {};
+
+export { ProgressBar as default };

package/package.json

@@ -1,50 +1,38 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "2.0.0-rc.13",
+  "version": "2.0.0-rc.27",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "NTBs common front-end design utilities and React components.",
-  "type": "module",
+  "main": "./build/index.js",
+  "module": "./build/index.js",
   "exports": {
-    ".": {
-      "import": "./build/esm/components/index.js",
-      "require": "./build/cjs/components/index.js"
-    },
-    "./ssr": {
-      "import": "./build/esm/ssr/index.js",
-      "require": "./build/cjs/ssr/index.js"
-    },
-    "./inputs": {
-      "import": "./build/esm/components/inputs/index.js",
-      "require": "./build/cjs/components/inputs/index.js"
-    },
-    "./data": {
-      "import": "./build/esm/components/data/index.js",
-      "require": "./build/cjs/components/data/index.js"
-    },
-    "./widgets": {
-      "import": "./build/esm/components/widgets/index.js",
-      "require": "./build/cjs/components/widgets/index.js"
-    },
-    "./layout": {
-      "import": "./build/esm/components/layout/index.js",
-      "require": "./build/cjs/components/layout/index.js"
-    },
-    "./*": {
-      "import": "./build/esm/*",
-      "require": "./build/cjs/*"
-    }
+    "./inputs": "./build/inputs/index.js",
+    "./inputs/*": "./build/inputs/*/index.js",
+    "./data": "./build/data/index.js",
+    "./data/*": "./build/data/*/index.js",
+    "./layout": "./build/layout/index.js",
+    "./layout/*": "./build/layout/*/index.js",
+    "./widgets": "./build/widgets/index.js",
+    "./widgets/*": "./build/widgets/*/index.js",
+    "./ssr": "./build/ssr/index.js",
+    "./styles/*": "./styles/*",
+    "./icons/*": "./icons/*"
   },
-  "main": "./build/cjs/components/index.js",
-  "module": "./build/esm/components/index.js",
-  "sideEffects": false,
+  "files": [
+    "build",
+    "styles",
+    "icons"
+  ],
   "scripts": {
     "build": "cross-env NODE_ENV=production rollup -c",
     "test": "jest",
     "test:watch": "jest --watch",
     "lint": "eslint .",
-    "storybook": "storybook dev -p 6006",
-    "storybook:export": "storybook build",
-    "generate": "node ./util/create-component",
-    "prepublishOnly": "npm run build"
+    "storybook": "start-storybook -p 6006",
+    "storybook:export": "build-storybook",
+    "generate": "node ./util/create-component"
   },
   "repository": {
     "type": "git",
@@ -55,9 +43,9 @@
     "url": ""
   },
   "homepage": "https://bitbucket.org/NTB-NO/react-components/src/master/",
-  "engines": {
-    "node": ">=24.0.0",
-    "npm": ">=10.0.0"
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.28.5",
@@ -65,15 +53,17 @@
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-react": "^7.13.13",
-    "@chromatic-com/storybook": "^4.1.3",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
-    "@storybook/addon-docs": "^10.0.8",
-    "@storybook/addon-links": "^10.0.8",
-    "@storybook/addon-themes": "^10.0.8",
-    "@storybook/react-webpack5": "^10.0.8",
+    "@storybook/addon-actions": "^6.5.14",
+    "@storybook/addon-docs": "^6.5.14",
+    "@storybook/addon-essentials": "^6.5.14",
+    "@storybook/addon-links": "^6.5.14",
+    "@storybook/cli": "^6.5.14",
+    "@storybook/react": "^6.5.14",
     "@svgr/rollup": "^5.5.0",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-dom": "^5.12.0",
@@ -89,6 +79,8 @@
     "jest": "^27.0.4",
     "postcss": "^8.3.0",
     "prop-types": "^15.7.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "rollup": "^2.50.6",
     "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-delete": "^2.0.0",
@@ -97,25 +89,26 @@
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-scss": "^2.6.1",
     "rollup-plugin-url": "^3.0.1",
-    "sass": "^1.86.3",
-    "sass-loader": "^16.0.5",
-    "storybook": "^10.0.8",
+    "sass": "^1.34.1",
+    "sass-loader": "^10.1.1",
+    "storybook-dark-mode": "^2.0.4",
     "url-loader": "^4.1.1"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.26.28",
-    "@restart/hooks": "^0.6.2",
-    "@storybook/cli": "^10.0.8",
+    "@floating-ui/react": "^0.26.24",
+    "@restart/hooks": "^0.3.26",
+    "@storybook/addons": "^6.5.14",
+    "@storybook/theming": "^6.5.14",
     "@tippyjs/react": "^4.2.6",
     "lodash": "^4.17.21",
     "nanoid": "^3.3.8",
     "polished": "^4.1.3",
     "popper-max-size-modifier": "^0.2.0",
     "react-lazy-load-image-component": "^1.5.1",
-    "react-select": "^5.10.2",
-    "react-select-async-paginate": "^0.7.11",
-    "react-spinners": "^0.17.0",
+    "react-select": "^5.7.7",
+    "react-select-async-paginate": "^0.7.3",
+    "react-spinners": "^0.13.8",
     "resize-observer-polyfill": "^1.5.1",
-    "styled-components": "^6.1.19"
+    "styled-components": "^5.3.7"
   }
 }

package/styles/all.scss

@@ -1,3 +1,3 @@
-@use './config' as *;
-@use 'utils/colors' as *;
-@use 'utils/theme' as *;
+@import './config';
+@import 'utils/colors';
+@import 'utils/theme';

package/styles/config.scss

@@ -0,0 +1,38 @@
+/**
+ * Colors
+ */
+$colors: (
+  'orange-600': #634e01,
+  'orange-500': #ff9900,
+  'orange-400': #ffcb7e,
+  'emerald-600': #296c58,
+  'emerald-500': #30826a,
+  'emerald-400': #64b49d,
+  'emerald-300': #bfe0d5,
+  'emerald-200': #f3f9f7,
+  'gray-900': #141313,
+  'gray-800': #272727,
+  'gray-700': #323232,
+  'gray-600': #505050,
+  'gray-500': #767676,
+  'gray-400': #b0b6b9,
+  'gray-300': #d9dce0,
+  'gray-200': #eff1f4,
+  'gray-100': #f7f8f9,
+  'gray-50': #f4f4f5,
+  'cercise-500': #5f1031,
+  'cercise-400': #854962,
+  'cercise-300': #d099b0,
+  'cercise-200': #fecaca,
+  'cercise-100': #f9f3f5,
+  'red-600': #7f1b1b,
+  'red-500': #d83000,
+  'red-200': #fbeae6,
+  'brown-500': #634e01,
+  'signal-yellow-500': #f4e21e,
+  'signal-yellow-400': #fff36c,
+  'signal-green-500': #00bd98,
+  'signal-green-400': #a3ffe0,
+  'black': #202435,
+  'white': #ffffff
+);

package/styles/utils/colors.scss

@@ -0,0 +1,15 @@
+@import '../config';
+
+@function color($name) {
+  @if map-has-key($colors, $name) {
+    @return map-get($colors, $name);
+  } @else {
+    @error "No color with the name `#{$name}`. was found.";
+  }
+}
+
+:export {
+  @each $name, $color in $colors {
+    #{$name}: $color;
+  }
+}

package/styles/utils/theme.scss

@@ -1,5 +1,3 @@
-@use '../config' as *;
-
 @mixin color($dark-color, $light-color) {
   @include genericThemeCode('color', $dark-color, $light-color);
 }

package/.eslintrc

@@ -1,19 +0,0 @@
-{
-  "env": {
-    "es6": true,
-    "browser": true,
-    "node": true,
-    "jest": true
-  },
-  "parserOptions": {
-    "sourceType": "module"
-  },
-  "ignorePatterns": ["build", "storybook-static"],
-  "parser": "@babel/eslint-parser",
-  "extends": ["eslint:recommended", "plugin:react/recommended"],
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  }
-}

package/cjs/_virtual/_rollupPluginBabelHelpers.js

@@ -1,84 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _defineProperty(e, r, t) {
-  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-    value: t,
-    enumerable: !0,
-    configurable: !0,
-    writable: !0
-  }) : e[r] = t, e;
-}
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function (r) {
-      return Object.getOwnPropertyDescriptor(e, r).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread2(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
-      _defineProperty(e, r, t[r]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
-      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
-    });
-  }
-  return e;
-}
-function _objectWithoutProperties(e, t) {
-  if (null == e) return {};
-  var o,
-    r,
-    i = _objectWithoutPropertiesLoose(e, t);
-  if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
-  }
-  return i;
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-function _toPrimitive(t, r) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r || "default");
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
-function _toPropertyKey(t) {
-  var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-
-exports.defineProperty = _defineProperty;
-exports["extends"] = _extends;
-exports.objectSpread2 = _objectSpread2;
-exports.objectWithoutProperties = _objectWithoutProperties;
-exports.objectWithoutPropertiesLoose = _objectWithoutPropertiesLoose;
-exports.toPrimitive = _toPrimitive;
-exports.toPropertyKey = _toPropertyKey;

package/cjs/_virtual/index.js

@@ -1,7 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var react = {exports: {}};
-
-exports.react = react;

package/cjs/_virtual/index2.js

@@ -1,7 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var propTypes = {exports: {}};
-
-exports.propTypes = propTypes;

package/cjs/_virtual/index3.js

@@ -1,7 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactIs = {exports: {}};
-
-exports.reactIs = reactIs;

package/cjs/_virtual/index4.js

@@ -1,7 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactDom = {exports: {}};
-
-exports.reactDom = reactDom;

package/cjs/_virtual/index5.js

@@ -1,7 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactIs = {exports: {}};
-
-exports.reactIs = reactIs;

package/cjs/_virtual/react-dom.development.js

@@ -1,7 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactDom_development = {};
-
-exports.__exports = reactDom_development;

package/cjs/_virtual/react-dom.production.js

@@ -1,7 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactDom_production = {};
-
-exports.__exports = reactDom_production;

package/cjs/_virtual/react-is.development.js

@@ -1,7 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactIs_development = {};
-
-exports.__exports = reactIs_development;

package/cjs/_virtual/react-is.development2.js

@@ -1,7 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactIs_development = {};
-
-exports.__exports = reactIs_development;

package/cjs/_virtual/react-is.production.min.js

@@ -1,7 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactIs_production_min = {};
-
-exports.__exports = reactIs_production_min;

package/cjs/_virtual/react-is.production.min2.js

@@ -1,7 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactIs_production_min = {};
-
-exports.__exports = reactIs_production_min;

package/cjs/_virtual/react.development.js

@@ -1,7 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var react_development = {exports: {}};
-
-exports.react_development = react_development;

package/cjs/_virtual/react.production.js

@@ -1,7 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var react_production = {};
-
-exports.__exports = react_production;