@cashub/ui 0.48.30 → 0.49.0-beta.0

package/dist/styles/theme/dark.theme.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// Currently, some style is all same for all viewport size
+// Common color style
+const colorStyle = {
+  colorWhite: '#ffffff',
+  colorDark: '#000000',
+  colorGrey: '#5b5f6f',
+  colorPrimary: '#597EF7',
+  colorSuccess: '#11D8CD',
+  colorWarning: '#FFCA7A',
+  colorDanger: '#F495A1',
+  colorHover: 'rgba(89, 126, 247, 0.2)',
+  colorActive: 'rgba(89, 126, 247, 0.2)',
+  scrollBarColor: 'rgba(89, 126, 247, 0.3)',
+  bgColor1: '#13142e',
+  bgColor2: '#222143',
+  bgColor3: '#2d2a5d',
+  backdropBg: 'rgba(0, 0, 0, 0.75)',
+  useLightBrand: true,
+  hideMainDecoration: true
+};
+
+// Common font style
+const fontStyle = {
+  fontH1: '2.25rem',
+  fontH2: '1.5rem',
+  fontH3: '1.25rem',
+  fontBody1: '1rem',
+  fontBody2: '0.875rem',
+  fontButton: '0.875rem',
+  fontCaption: '0.75rem',
+  fontFamily: 'Helvetica',
+  fontWeightNormal: '400',
+  fontWeightBold: 'bold',
+  fontOnPrimary: colorStyle.colorWhite,
+  fontOnSuccess: colorStyle.colorWhite,
+  fontOnWarning: colorStyle.colorWhite,
+  fontOnDanger: colorStyle.colorWhite,
+  fontOnBg: colorStyle.colorWhite,
+  fontMutedColor: 'rgba(255, 255, 255, 0.5)'
+};
+
+// Theme stylesheet
+const darkTheme = {
+  desktop: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '1rem',
+    spacer: '1.5rem',
+    spacerL: '2rem'
+  },
+  tablet: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem'
+  },
+  mobile: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem'
+  }
+};
+var _default = exports.default = darkTheme;

package/dist/styles/theme/ember.theme.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const colorStyle = {
+  colorWhite: '#ffffff',
+  colorDark: '#2A1416',
+  colorGrey: '#A38A8A',
+  colorPrimary: '#D9211E',
+  colorSuccess: '#3A86BD',
+  colorWarning: '#EC7084',
+  colorDanger: '#8B1E9E',
+  colorHover: 'rgba(217, 33, 30, 0.1)',
+  colorActive: 'rgba(217, 33, 30, 0.15)',
+  scrollBarColor: 'rgba(217, 33, 30, 0.3)',
+  bgColor1: '#FAF5F5',
+  bgColor2: '#FFFFFF',
+  bgColor3: '#F3E9E9',
+  bgColor4: 'linear-gradient(90deg, #E62B27 0%, #D9211E 45%, #C60E27 100%)',
+  backdropBg: 'rgba(0, 0, 0, 0.75)',
+  useModernIcons: true,
+  useLightBrand: true,
+  bgMainKey: 'vivid',
+  colorHoverSidebar: 'rgba(255, 255, 255, 0.15)',
+  colorActiveSidebar: 'rgba(255, 255, 255, 0.22)',
+  colorTextSidebar: '#FFFFFF',
+  colorIconHeader: '#FFFFFF',
+  colorArrowSidebar: '#FFFFFF'
+};
+const fontStyle = {
+  fontH1: '2.25rem',
+  fontH2: '1.5rem',
+  fontH3: '1.25rem',
+  fontBody1: '1rem',
+  fontBody2: '0.875rem',
+  fontButton: '0.875rem',
+  fontCaption: '0.75rem',
+  fontFamily: 'Helvetica',
+  fontWeightNormal: '400',
+  fontWeightBold: 'bold',
+  fontOnPrimary: colorStyle.colorWhite,
+  fontOnSuccess: colorStyle.colorWhite,
+  fontOnWarning: colorStyle.colorDark,
+  fontOnDanger: colorStyle.colorWhite,
+  fontOnBg: colorStyle.colorDark,
+  fontMutedColor: 'rgba(42, 20, 22, 0.6)'
+};
+const emberTheme = {
+  desktop: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '1rem',
+    spacer: '1.5rem',
+    spacerL: '2rem'
+  },
+  tablet: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem'
+  },
+  mobile: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem'
+  }
+};
+var _default = exports.default = emberTheme;

package/dist/styles/theme/midnight.theme.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const colorStyle = {
+  colorWhite: '#ffffff',
+  colorDark: '#1F2430',
+  colorGrey: '#8A8FA3',
+  colorPrimary: '#00255B',
+  colorSuccess: '#1DA57A',
+  colorWarning: '#F2994A',
+  colorDanger: '#E5484D',
+  colorHover: 'rgba(0, 37, 91, 0.1)',
+  colorActive: 'rgba(0, 37, 91, 0.15)',
+  scrollBarColor: 'rgba(0, 37, 91, 0.3)',
+  bgColor1: '#F5F6F8',
+  bgColor2: '#FFFFFF',
+  bgColor3: '#EDEFF3',
+  bgColor4: '#00255B',
+  backdropBg: 'rgba(0, 0, 0, 0.75)',
+  useModernIcons: false,
+  useLightBrand: true,
+  colorHoverSidebar: 'rgba(255, 255, 255, 0.12)',
+  colorActiveSidebar: 'rgba(255, 255, 255, 0.18)',
+  colorTextSidebar: '#FFFFFF',
+  colorIconHeader: '#FFFFFF',
+  colorArrowSidebar: '#FFFFFF'
+};
+const fontStyle = {
+  fontH1: '2.25rem',
+  fontH2: '1.5rem',
+  fontH3: '1.25rem',
+  fontBody1: '1rem',
+  fontBody2: '0.875rem',
+  fontButton: '0.875rem',
+  fontCaption: '0.75rem',
+  fontFamily: 'Helvetica',
+  fontWeightNormal: '400',
+  fontWeightBold: 'bold',
+  fontOnPrimary: colorStyle.colorWhite,
+  fontOnSuccess: colorStyle.colorWhite,
+  fontOnWarning: colorStyle.colorDark,
+  fontOnDanger: colorStyle.colorWhite,
+  fontOnBg: colorStyle.colorDark,
+  fontMutedColor: 'rgba(31, 36, 48, 0.6)'
+};
+const midnightTheme = {
+  desktop: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '1rem',
+    spacer: '1.5rem',
+    spacerL: '2rem'
+  },
+  tablet: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem'
+  },
+  mobile: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem'
+  }
+};
+var _default = exports.default = midnightTheme;

package/dist/styles/theme/white.theme.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// Currently, some style is all same for all viewport size
+// Common color style
+const colorStyle = {
+  colorWhite: '#ffffff',
+  colorDark: '#353351',
+  colorGrey: '#b7bbcd',
+  colorPrimary: '#345FEB',
+  colorSuccess: '#11D8CD',
+  colorWarning: '#feb444',
+  colorDanger: '#F495A1',
+  colorHover: 'rgba(52, 95, 235, 0.2)',
+  colorActive: 'rgba(52, 95, 235, 0.2)',
+  scrollBarColor: 'rgba(52, 95, 235, 0.3)',
+  bgColor1: '#EEEEEE',
+  bgColor2: '#F7F7F7',
+  bgColor3: '#FFFFFF',
+  backdropBg: 'rgba(0, 0, 0, 0.75)',
+  useModernIcons: false,
+  useLightBrand: false,
+  hideMainDecoration: false,
+  bgMainKey: 'default'
+};
+
+// Common font style
+const fontStyle = {
+  fontH1: '2.25rem',
+  fontH2: '1.5rem',
+  fontH3: '1.25rem',
+  fontBody1: '1rem',
+  fontBody2: '0.875rem',
+  fontButton: '0.875rem',
+  fontCaption: '0.75rem',
+  fontFamily: 'Helvetica',
+  fontWeightNormal: '400',
+  fontWeightBold: 'bold',
+  fontOnPrimary: colorStyle.bgColor2,
+  fontOnSuccess: colorStyle.colorDark,
+  fontOnWarning: colorStyle.colorDark,
+  fontOnDanger: colorStyle.colorDark,
+  fontOnBg: colorStyle.colorDark,
+  fontMutedColor: 'rgba(53, 51, 81, 0.6)'
+};
+
+// Theme stylesheet
+const whiteTheme = {
+  desktop: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '1rem',
+    spacer: '1.5rem',
+    spacerL: '2rem'
+  },
+  tablet: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem'
+  },
+  mobile: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem'
+  }
+};
+var _default = exports.default = whiteTheme;

package/dist/styles/themes.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _white = _interopRequireDefault(require("./theme/white.theme"));
+var _light = _interopRequireDefault(require("./theme/light.theme"));
+var _dark = _interopRequireDefault(require("./theme/dark.theme"));
+var _midnight = _interopRequireDefault(require("./theme/midnight.theme"));
+var _ember = _interopRequireDefault(require("./theme/ember.theme"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const themes = {
+  White: _white.default,
+  Light: _light.default,
+  Dark: _dark.default,
+  Midnight: _midnight.default,
+  Ember: _ember.default
+};
+var _default = exports.default = themes;

package/package.json

@@ -1,55 +1,64 @@
-{
-  "name": "@cashub/ui",
-  "version": "0.48.30",
-  "private": false,
-  "author": "CasHUB Team",
-  "description": "CasHUB UI components library",
-  "main": "index.js",
-  "keywords": [
-    "CasHUB"
-  ],
-  "license": "MIT",
-  "dependencies": {
-    "@cashub/hooks": "^0.5.3",
-    "@cashub/utils": "^1.3.2",
-    "@googlemaps/markerclusterer": "^2.5.1",
-    "@googlemaps/react-wrapper": "^1.1.35",
-    "@monaco-editor/react": "^4.6.0",
-    "@popperjs/core": "^2.11.5",
-    "@yaireo/tagify": "^4.12.0",
-    "brace": "^0.11.1",
-    "chart.js": "^3.8.0",
-    "cropperjs": "^1.5.12",
-    "jsoneditor": "^9.8.0",
-    "jsoneditor-react": "^3.1.2",
-    "leaflet": "^1.7.1",
-    "leaflet-draw": "^1.0.4",
-    "lodash.uniqueid": "^4.0.1",
-    "moment": "^2.29.3",
-    "normalize.css": "^8.0.1",
-    "overlapping-marker-spiderfier": "^1.1.4",
-    "qrcode.react": "^3.0.2",
-    "rc-time-picker": "^3.7.3",
-    "react-chartjs-2": "^3.3.0",
-    "react-datepicker": "^4.8.0",
-    "react-helmet-async": "^2.0.3",
-    "react-leaflet": "^3.1.0",
-    "react-leaflet-markercluster": "^3.0.0-rc1",
-    "react-outside-click-handler": "^1.3.0",
-    "react-popper": "^2.3.0",
-    "react-router-dom": "^5.2.0",
-    "react-toastify": "^7.0.4",
-    "react-transition-group": "^4.4.2",
-    "react-window": "^1.8.11",
-    "styled-components": "^5.3.0",
-    "treeflex": "^2.0.1",
-    "xml-formatter": "^3.6.3"
-  },
-  "peerDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "@cashub/ui",
+  "version": "0.49.0-beta.0",
+  "private": false,
+  "author": "CasHUB Team",
+  "description": "CasHUB UI components library",
+  "main": "index.js",
+  "keywords": [
+    "CasHUB"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "release": "npm run clean && npm run build && npm run copy",
+    "build": "node ../../scripts/build.js",
+    "copy": "node ../../scripts/copy-file.js",
+    "test": "node ../../scripts/test.js",
+    "test:coverage": "node ../../scripts/test.js --coverage",
+    "test:dev": "node ../../scripts/test.js --watch",
+    "clean": "rm -rf dist/*"
+  },
+  "dependencies": {
+    "@cashub/hooks": "^0.5.3",
+    "@cashub/utils": "^1.3.2",
+    "@googlemaps/markerclusterer": "^2.5.1",
+    "@googlemaps/react-wrapper": "^1.1.35",
+    "@monaco-editor/react": "^4.6.0",
+    "@popperjs/core": "^2.11.5",
+    "@yaireo/tagify": "^4.12.0",
+    "brace": "^0.11.1",
+    "chart.js": "^3.8.0",
+    "cropperjs": "^1.5.12",
+    "jsoneditor": "^9.8.0",
+    "jsoneditor-react": "^3.1.2",
+    "leaflet": "^1.7.1",
+    "leaflet-draw": "^1.0.4",
+    "lodash.uniqueid": "^4.0.1",
+    "moment": "^2.29.3",
+    "normalize.css": "^8.0.1",
+    "overlapping-marker-spiderfier": "^1.1.4",
+    "qrcode.react": "^3.0.2",
+    "rc-time-picker": "^3.7.3",
+    "react-chartjs-2": "^3.3.0",
+    "react-datepicker": "^4.8.0",
+    "react-helmet-async": "^2.0.3",
+    "react-leaflet": "^3.1.0",
+    "react-leaflet-markercluster": "^3.0.0-rc1",
+    "react-outside-click-handler": "^1.3.0",
+    "react-popper": "^2.3.0",
+    "react-router-dom": "^5.2.0",
+    "react-toastify": "^7.0.4",
+    "react-transition-group": "^4.4.2",
+    "react-window": "^1.8.11",
+    "styled-components": "^5.3.0",
+    "treeflex": "^2.0.1",
+    "xml-formatter": "^3.6.3"
+  },
+  "peerDependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/setupTests.js

@@ -0,0 +1,9 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
+
+// mock ResizeObserverModule
+import * as ResizeObserverModule from 'resize-observer-polyfill';
+global.ResizeObserver = ResizeObserverModule.default;

package/src/Tab/Tab.js

@@ -0,0 +1,11 @@
+import TabContext from './subComponent/TabContext';
+
+const Tab = ({ children, selected, onChange, mode = 'view', onTitleChange }) => {
+  return (
+    <TabContext.Provider value={{ selected, onChange, mode, onTitleChange }}>
+      {children}
+    </TabContext.Provider>
+  );
+};
+
+export default Tab;