@stokr/components-library 2.3.65-beta.10 → 2.3.65-beta.11

package/dist/components/Chips/Chip.styles.js

@@ -6,15 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.Wrapper = exports.TooltipChipIcon = exports.StyledChip = exports.ChipText = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _theme = _interopRequireDefault(require("../../styles/theme"));
+var _InfoIcon = require("../InfoIcon/InfoIcon.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledChip = exports.StyledChip = _styledComponents.default.div.withConfig({
   displayName: "Chipstyles__StyledChip",
   componentId: "sc-pcmyil-0"
-})(["display:inline-flex;gap:4px;align-items:center;padding:8px 16px;border-radius:20px;background-color:transparent;color:black;cursor:pointer;transition:background-color 0.3s;font-size:11px;font-weight:400;line-height:20px;letter-spacing:3px;font-weight:600;min-height:40px;&:hover,&:active{background-color:red;color:white;}", ""], _ref => {
+})(["display:inline-flex;gap:4px;align-items:center;padding:8px 16px;border-radius:20px;background-color:transparent;color:black;cursor:pointer;transition:background-color 0.3s;font-size:11px;font-weight:400;line-height:20px;letter-spacing:3px;font-weight:600;min-height:40px;&:hover,&:active{background-color:red;color:white;", "{color:", ";}}", ""], _InfoIcon.Icon, _theme.default.cWhite, _ref => {
   let {
     isActive
   } = _ref;
-  return isActive && "\n      background-color: red;\n      color: white;\n      font-weight: 800;\n\n      ".concat(TooltipChipIcon, " {\n        color: ").concat(_theme.default.cWhite, ";\n      }\n    ");
+  return isActive && "\n      background-color: red;\n      color: white;\n      font-weight: 800;\n\n      ".concat(_InfoIcon.Icon, " {\n        color: ").concat(_theme.default.cWhite, " ;\n      }\n    ");
 });
 const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
   displayName: "Chipstyles__Wrapper",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "2.3.65-beta.10",
+  "version": "2.3.65-beta.11",
   "description": "STOKR - Components Library",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -18,7 +18,8 @@
     "build": "react-scripts build",
     "build-storybook": "storybook build",
     "build-storybook-docs": "storybook build -s public --docs",
-    "build:dist": "cross-env BABEL_ENV=production babel src -d dist",
+    "copy:static": "node -e \"require('fs').cpSync('src/static', 'dist/static', {recursive: true})\"",
+    "build:dist": "cross-env BABEL_ENV=production babel src -d dist && npm run copy:static",
     "test": "react-scripts test",
     "prepare": "npm run build",
     "storybook": "storybook dev -p 6006",

package/dist/components/2FA/EnterCode.stories.js

@@ -1,35 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.EnterCodeSimple = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _EnterCode = require("./EnterCode");
-var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
-var _global = _interopRequireDefault(require("../../styles/global"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/2FA',
-  component: _EnterCode.EnterCode,
-  argTypes: {
-    isModal: {
-      type: 'boolean',
-      defaultValue: true
-    }
-    // inputType: { type: 'string' },
-    // placeholder: { type: 'string', defaultValue: '' },
-    // value: { type: 'string', defaultValue: '' },
-    // numInputs: { type: 'number', defaultValue: 4 },
-    // shouldAutoFocus: { type: 'boolean', defaultValue: false },
-    // onChange: { action: 'change', type: 'function' },
-    // onPaste: { type: 'function' },
-    // renderSeparator: { type: 'component' },
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_EnterCode.EnterCode, args)));
-const EnterCodeSimple = exports.EnterCodeSimple = Template.bind({});
-EnterCodeSimple.args = {
-  isModalOpen: true,
-  popupError: {}
-};

package/dist/components/2FA/disable-2fa-flow.stories.js

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Disable2FA = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactRouterDom = require("react-router-dom");
-var _global = _interopRequireDefault(require("../../styles/global"));
-var _disable2faFlow = _interopRequireDefault(require("./disable-2fa-flow"));
-var _AuthContext = require("../../context/AuthContext");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/2FA',
-  component: _disable2faFlow.default,
-  argTypes: {
-    showFlow: {
-      type: 'boolean',
-      defaultValue: true
-    },
-    setShowFlow: {},
-    setShowPending: {},
-    withSuccessPage: {
-      type: 'boolean',
-      defaultValue: false
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_AuthContext.AuthProvider, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_disable2faFlow.default, args))));
-const Disable2FA = exports.Disable2FA = Template.bind({});
-Disable2FA.args = {};

package/dist/components/2FA/enable-2fa-flow.stories.js

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Enable2FA = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactRouterDom = require("react-router-dom");
-var _global = _interopRequireDefault(require("../../styles/global"));
-var _enable2faFlow = _interopRequireDefault(require("./enable-2fa-flow"));
-var _AuthContext = require("../../context/AuthContext");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/2FA',
-  component: _enable2faFlow.default,
-  argTypes: {
-    showFlow: {
-      type: 'boolean',
-      defaultValue: true
-    },
-    setShowFlow: {},
-    setShowPending: {},
-    withSuccessPage: {
-      type: 'boolean',
-      defaultValue: false
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_AuthContext.AuthProvider, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_enable2faFlow.default, args))));
-const Enable2FA = exports.Enable2FA = Template.bind({});
-Enable2FA.args = {};

package/dist/components/2FA/login-with-otp-flow.stories.js

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.LoginWithOTPFlow = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactRouterDom = require("react-router-dom");
-var _global = _interopRequireDefault(require("../../styles/global"));
-var _loginWithOtpFlow = _interopRequireDefault(require("./login-with-otp-flow"));
-var _AuthContext = require("../../context/AuthContext");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/2FA',
-  component: _loginWithOtpFlow.default,
-  argTypes: {
-    showFlow: {
-      type: 'boolean',
-      defaultValue: true
-    },
-    setShowFlow: {},
-    setShowPending: {},
-    withSuccessPage: {
-      type: 'boolean',
-      defaultValue: false
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_AuthContext.AuthProvider, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_loginWithOtpFlow.default, args))));
-const LoginWithOTPFlow = exports.LoginWithOTPFlow = Template.bind({});
-LoginWithOTPFlow.args = {};

package/dist/components/2FA/main-flow.stories.js

@@ -1,162 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.WithoutSwitch = exports.WithCustomComponentFunction = exports.WithCustomComponent = exports.PreOpenedEnableFlow = exports.PreOpenedDisableFlow = exports.Default = exports.CustomTitles = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactRouterDom = require("react-router-dom");
-var _global = _interopRequireDefault(require("../../styles/global"));
-var _mainFlow = _interopRequireDefault(require("./main-flow"));
-var _AuthContext = require("../../context/AuthContext");
-var _Button = _interopRequireDefault(require("../Button/Button.styles"));
-var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-var _default = exports.default = {
-  title: 'Components Library/2FA/Main2FAFlow',
-  component: _mainFlow.default,
-  argTypes: {
-    title: {
-      control: 'text',
-      description: 'Title text for the 2FA section'
-    },
-    subtitle: {
-      control: 'text',
-      description: 'Subtitle text for the 2FA section'
-    },
-    showSwitch: {
-      control: 'boolean',
-      description: 'Show/hide the toggle switch',
-      defaultValue: true
-    },
-    open2faflow: {
-      control: 'boolean',
-      description: 'Open enable 2FA flow on mount'
-    },
-    openDisable2faflow: {
-      control: 'boolean',
-      description: 'Open disable 2FA flow on mount'
-    },
-    onRequiresRecentLoginError: {
-      action: 'requiresRecentLogin',
-      description: 'Callback when recent login is required'
-    },
-    onLoginAgainClick: {
-      action: 'loginAgain',
-      description: 'Callback when user clicks login again'
-    }
-  },
-  decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_AuthContext.AuthProvider, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(Story, null))))]
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_mainFlow.default, args));
-
-// Default example
-const Default = exports.Default = Template.bind({});
-Default.args = {};
-
-// With custom component as React element
-const WithCustomComponent = () => {
-  const CustomButtonGroup = _ref => {
-    var _flowActions$isFlowOp, _flowActions$isFlowOp2;
-    let {
-      flowActions
-    } = _ref;
-    if (!flowActions) return null;
-    return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, {
-      noPaddingHorizontal: true,
-      style: {
-        marginTop: '16px'
-      }
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        display: 'flex',
-        gap: '12px',
-        flexWrap: 'wrap'
-      }
-    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-      onClick: flowActions.openEnable2FA,
-      disabled: flowActions.is2FAEnabled
-    }, "Enable 2FA"), /*#__PURE__*/_react.default.createElement(_Button.default, {
-      onClick: flowActions.openDisable2FA,
-      disabled: !flowActions.is2FAEnabled,
-      secondary: true
-    }, "Disable 2FA"), /*#__PURE__*/_react.default.createElement(_Button.default, {
-      onClick: flowActions.closeFlows,
-      outline: true
-    }, "Close All Flows")), /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        marginTop: '12px',
-        fontSize: '12px',
-        color: '#666'
-      }
-    }, /*#__PURE__*/_react.default.createElement("p", null, "Status: ", flowActions.is2FAEnabled ? 'Enabled' : 'Disabled', /*#__PURE__*/_react.default.createElement("br", null), "Enable Flow Open: ", (_flowActions$isFlowOp = flowActions.isFlowOpen) !== null && _flowActions$isFlowOp !== void 0 && _flowActions$isFlowOp.enable2fa ? 'Yes' : 'No', /*#__PURE__*/_react.default.createElement("br", null), "Disable Flow Open:", ' ', (_flowActions$isFlowOp2 = flowActions.isFlowOpen) !== null && _flowActions$isFlowOp2 !== void 0 && _flowActions$isFlowOp2.disable2fa ? 'Yes' : 'No')));
-  };
-  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_mainFlow.default, {
-    customComponent: /*#__PURE__*/_react.default.createElement(CustomButtonGroup, null)
-  }));
-};
-
-// With custom component as render function
-exports.WithCustomComponent = WithCustomComponent;
-const WithCustomComponentFunction = () => {
-  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_mainFlow.default, {
-    customComponent: flowActions => {
-      if (!flowActions) return null;
-      return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, {
-        noPaddingHorizontal: true,
-        style: {
-          marginTop: '16px'
-        }
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          display: 'flex',
-          gap: '12px',
-          flexWrap: 'wrap'
-        }
-      }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-        onClick: flowActions.openEnable2FA,
-        disabled: flowActions.is2FAEnabled
-      }, "Enable 2FA"), /*#__PURE__*/_react.default.createElement(_Button.default, {
-        onClick: flowActions.openDisable2FA,
-        disabled: !flowActions.is2FAEnabled,
-        secondary: true
-      }, "Disable 2FA"), /*#__PURE__*/_react.default.createElement(_Button.default, {
-        onClick: flowActions.closeFlows,
-        outline: true
-      }, "Close All Flows")), /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          marginTop: '12px',
-          fontSize: '12px',
-          color: '#666'
-        }
-      }, /*#__PURE__*/_react.default.createElement("p", null, "Status: ", flowActions.is2FAEnabled ? 'Enabled' : 'Disabled')));
-    }
-  }));
-};
-
-// Without switch
-exports.WithCustomComponentFunction = WithCustomComponentFunction;
-const WithoutSwitch = exports.WithoutSwitch = Template.bind({});
-WithoutSwitch.args = {
-  showSwitch: false
-};
-
-// Custom titles
-const CustomTitles = exports.CustomTitles = Template.bind({});
-CustomTitles.args = {
-  title: 'Two-Factor Authentication',
-  subtitle: 'Add an extra layer of security to your account'
-};
-
-// Pre-opened enable flow
-const PreOpenedEnableFlow = exports.PreOpenedEnableFlow = Template.bind({});
-PreOpenedEnableFlow.args = {
-  open2faflow: true
-};
-
-// Pre-opened disable flow
-const PreOpenedDisableFlow = exports.PreOpenedDisableFlow = Template.bind({});
-PreOpenedDisableFlow.args = {
-  openDisable2faflow: true
-};

package/dist/components/AccountBalance/AccountBalance.stories.js

@@ -1,83 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.AccountBalanceRight = exports.AccountBalanceOverview = exports.AccountBalanceExample = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _AccountBalance = _interopRequireDefault(require("./AccountBalance"));
-var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
-var _global = _interopRequireDefault(require("../../styles/global"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/Account Balance',
-  component: _AccountBalance.default,
-  argTypes: {
-    title: {
-      type: 'string',
-      defaultValue: '',
-      required: true
-    },
-    value: {
-      type: 'string',
-      defaultValue: '',
-      required: true
-    },
-    unit: {
-      type: 'string',
-      defaultValue: '',
-      required: true
-    },
-    eqValue: {
-      type: 'string'
-    },
-    eqUnit: {
-      type: 'string'
-    },
-    info: {
-      type: 'string',
-      defaultValue: ''
-    },
-    half: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    right: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    border: {
-      type: 'boolean',
-      defaultValue: false
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_AccountBalance.default, args)));
-const AccountBalanceOverview = exports.AccountBalanceOverview = Template.bind({});
-AccountBalanceOverview.args = {
-  title: 'Account Balance Title',
-  value: ' some Value ',
-  unit: ' A Unit ',
-  info: 'Info Tooltip',
-  eqValue: ' eqValue ',
-  eqUnit: ' eqUnit '
-};
-const AccountBalanceExample = exports.AccountBalanceExample = Template.bind({});
-AccountBalanceExample.args = {
-  title: 'Account Balance Title',
-  value: '42',
-  unit: '€',
-  info: 'Information',
-  eqValue: '47,34',
-  eqUnit: '$'
-};
-const AccountBalanceRight = exports.AccountBalanceRight = Template.bind({});
-AccountBalanceRight.args = {
-  title: 'Account Balance Title',
-  value: '42',
-  unit: '€',
-  info: 'Information',
-  eqValue: '47,34',
-  eqUnit: '$',
-  right: true
-};