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

package/dist/components/Input/Select.stories.js

@@ -1,478 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SelectOptionStrings = exports.SelectOptionNodes = exports.SelectEmpty = exports.Searchable = exports.NotSearchable = exports.CreatableCustomLabel = exports.Creatable = exports.AllStates = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Select = require("./Select");
-var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
-var _Medium = require("../icons/Medium");
-var _Share = require("../icons/Share");
-var _Number = require("../Number/Number");
-var _global = _interopRequireDefault(require("../../styles/global"));
-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); }
-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); }
-var _default = exports.default = {
-  title: 'Components Library/Inputs/Select',
-  component: _Select.Select,
-  decorators: [Story => /*#__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(Story, null)))],
-  argTypes: {
-    id: {
-      type: 'string',
-      required: true
-    },
-    name: {
-      type: 'string',
-      required: true
-    },
-    label: {
-      type: 'string',
-      defaultValue: ''
-    },
-    error: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    touched: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    value: {
-      type: 'string',
-      defaultValue: ''
-    },
-    disabled: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    options: {
-      control: {
-        type: 'object'
-      },
-      defaultValue: [{
-        key: 'default option key',
-        value: 'default option value',
-        label: 'default option label, (string or node)'
-      }],
-      required: true
-    },
-    search: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    checkLabel: {
-      type: 'function'
-    },
-    onChange: {
-      action: 'change',
-      type: 'function'
-    },
-    onBlur: {
-      action: 'blur',
-      type: 'function'
-    },
-    onFocus: {
-      action: 'hasFocus',
-      type: 'function'
-    },
-    setTimeout: {
-      type: 'function'
-    }
-  }
-}; // Controlled wrapper for interactive stories
-const ControlledSelect = props => {
-  const [value, setValue] = (0, _react.useState)(props.value || '');
-  return /*#__PURE__*/_react.default.createElement(_Select.Select, _extends({}, props, {
-    value: value,
-    onChange: _ref => {
-      let {
-        value: newValue
-      } = _ref;
-      setValue(newValue);
-      console.log('Selected:', newValue);
-    }
-  }));
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(ControlledSelect, args);
-const SelectOptionStrings = exports.SelectOptionStrings = Template.bind({});
-SelectOptionStrings.args = {
-  label: 'click LABEL here for options',
-  value: null,
-  search: true,
-  //menuHeight: 100,
-  options: [{
-    key: 'other option key',
-    value: 'other option value',
-    label: 'dropdown option label string 1'
-  }, {
-    key: 'other option key',
-    value: 'other option value',
-    label: 'dropdown option label string 2'
-  }, {
-    key: 'other option key',
-    value: 'other option value',
-    label: 'dropdown option label string 3'
-  }, {
-    key: 'other option key',
-    value: 'other option value',
-    label: 'dropdown option label string 4'
-  }]
-};
-const SelectOptionNodes = exports.SelectOptionNodes = Template.bind({});
-SelectOptionNodes.args = {
-  label: 'click LABEL here for options',
-  value: 'your text (value)',
-  options: [{
-    key: 'other option key',
-    value: 'other option value',
-    label: 'dropdown option label 1'
-  }, {
-    key: 'other option key',
-    value: 'other option value',
-    label: 'dropdown option label 2'
-  }, {
-    key: 'other option key',
-    value: 'other option value',
-    label: /*#__PURE__*/_react.default.createElement(_Share.Share, null)
-  }, {
-    key: 'other option key',
-    value: 'other option value',
-    label: /*#__PURE__*/_react.default.createElement(_Medium.Medium, null)
-  }, {
-    key: 'other option key',
-    value: 'other option value',
-    label: /*#__PURE__*/_react.default.createElement(_Number.Number, null)
-  }]
-};
-const SelectEmpty = exports.SelectEmpty = Template.bind({});
-SelectEmpty.args = {};
-
-// Searchable Select - type to filter options
-const Searchable = () => {
-  const [value, setValue] = (0, _react.useState)('');
-  const countryOptions = [{
-    key: 'us',
-    value: 'us',
-    label: 'United States'
-  }, {
-    key: 'uk',
-    value: 'uk',
-    label: 'United Kingdom'
-  }, {
-    key: 'de',
-    value: 'de',
-    label: 'Germany'
-  }, {
-    key: 'fr',
-    value: 'fr',
-    label: 'France'
-  }, {
-    key: 'es',
-    value: 'es',
-    label: 'Spain'
-  }, {
-    key: 'it',
-    value: 'it',
-    label: 'Italy'
-  }, {
-    key: 'nl',
-    value: 'nl',
-    label: 'Netherlands'
-  }, {
-    key: 'ch',
-    value: 'ch',
-    label: 'Switzerland'
-  }, {
-    key: 'at',
-    value: 'at',
-    label: 'Austria'
-  }, {
-    key: 'be',
-    value: 'be',
-    label: 'Belgium'
-  }];
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
-    style: {
-      marginBottom: '16px',
-      fontSize: '14px'
-    }
-  }, "Type to filter options (try typing \"United\" or \"Ger\")"), /*#__PURE__*/_react.default.createElement(_Select.Select, {
-    id: "country",
-    name: "country",
-    label: "Select Country",
-    options: countryOptions,
-    value: value,
-    search: true,
-    onChange: _ref2 => {
-      let {
-        value: newValue
-      } = _ref2;
-      return setValue(newValue);
-    }
-  }), /*#__PURE__*/_react.default.createElement("p", {
-    style: {
-      marginTop: '12px',
-      fontSize: '12px',
-      color: '#666'
-    }
-  }, "Selected: ", /*#__PURE__*/_react.default.createElement("strong", null, value || '(none)')));
-};
-
-// Not Searchable (default)
-exports.Searchable = Searchable;
-const NotSearchable = () => {
-  const [value, setValue] = (0, _react.useState)('');
-  const options = [{
-    key: 'opt1',
-    value: 'option1',
-    label: 'Option 1'
-  }, {
-    key: 'opt2',
-    value: 'option2',
-    label: 'Option 2'
-  }, {
-    key: 'opt3',
-    value: 'option3',
-    label: 'Option 3'
-  }];
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
-    style: {
-      marginBottom: '16px',
-      fontSize: '14px'
-    }
-  }, "Click to open, no typing (search=false)"), /*#__PURE__*/_react.default.createElement(_Select.Select, {
-    id: "basic",
-    name: "basic",
-    label: "Select Option",
-    options: options,
-    value: value,
-    search: false,
-    onChange: _ref3 => {
-      let {
-        value: newValue
-      } = _ref3;
-      return setValue(newValue);
-    }
-  }), /*#__PURE__*/_react.default.createElement("p", {
-    style: {
-      marginTop: '12px',
-      fontSize: '12px',
-      color: '#666'
-    }
-  }, "Selected: ", /*#__PURE__*/_react.default.createElement("strong", null, value || '(none)')));
-};
-
-// All States
-exports.NotSearchable = NotSearchable;
-const AllStates = () => {
-  const [value1, setValue1] = (0, _react.useState)('');
-  const [value2, setValue2] = (0, _react.useState)('de');
-  const [value3, setValue3] = (0, _react.useState)('');
-  const options = [{
-    key: 'us',
-    value: 'us',
-    label: 'United States'
-  }, {
-    key: 'uk',
-    value: 'uk',
-    label: 'United Kingdom'
-  }, {
-    key: 'de',
-    value: 'de',
-    label: 'Germany'
-  }, {
-    key: 'fr',
-    value: 'fr',
-    label: 'France'
-  }];
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '32px'
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
-    style: {
-      marginBottom: '8px',
-      fontSize: '12px',
-      color: '#666'
-    }
-  }, "Empty with search"), /*#__PURE__*/_react.default.createElement(_Select.Select, {
-    id: "empty",
-    name: "empty",
-    label: "Country",
-    options: options,
-    value: value1,
-    search: true,
-    onChange: _ref4 => {
-      let {
-        value
-      } = _ref4;
-      return setValue1(value);
-    }
-  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
-    style: {
-      marginBottom: '8px',
-      fontSize: '12px',
-      color: '#666'
-    }
-  }, "Pre-selected value"), /*#__PURE__*/_react.default.createElement(_Select.Select, {
-    id: "preselected",
-    name: "preselected",
-    label: "Country",
-    options: options,
-    value: value2,
-    search: true,
-    onChange: _ref5 => {
-      let {
-        value
-      } = _ref5;
-      return setValue2(value);
-    }
-  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
-    style: {
-      marginBottom: '8px',
-      fontSize: '12px',
-      color: '#666'
-    }
-  }, "Disabled"), /*#__PURE__*/_react.default.createElement(_Select.Select, {
-    id: "disabled",
-    name: "disabled",
-    label: "Country",
-    options: options,
-    value: "uk",
-    disabled: true,
-    onChange: () => {}
-  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
-    style: {
-      marginBottom: '8px',
-      fontSize: '12px',
-      color: '#666'
-    }
-  }, "Error state"), /*#__PURE__*/_react.default.createElement(_Select.Select, {
-    id: "error",
-    name: "error",
-    label: "Country",
-    options: options,
-    value: value3,
-    error: true,
-    touched: true,
-    onChange: _ref6 => {
-      let {
-        value
-      } = _ref6;
-      return setValue3(value);
-    }
-  })));
-};
-
-// Creatable - type to add custom options
-exports.AllStates = AllStates;
-const Creatable = () => {
-  const [value, setValue] = (0, _react.useState)('');
-  const [options, setOptions] = (0, _react.useState)([{
-    key: 'react',
-    value: 'react',
-    label: 'React'
-  }, {
-    key: 'vue',
-    value: 'vue',
-    label: 'Vue'
-  }, {
-    key: 'angular',
-    value: 'angular',
-    label: 'Angular'
-  }, {
-    key: 'svelte',
-    value: 'svelte',
-    label: 'Svelte'
-  }]);
-  const handleChange = _ref7 => {
-    let {
-      value: newValue
-    } = _ref7;
-    setValue(newValue);
-    // Add new option to the list if it doesn't exist
-    if (!options.find(opt => opt.value === newValue)) {
-      setOptions([...options, {
-        key: newValue,
-        value: newValue,
-        label: newValue
-      }]);
-    }
-  };
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
-    style: {
-      marginBottom: '16px',
-      fontSize: '14px'
-    }
-  }, "Type to search or create a new option (try typing \"Next.js\")"), /*#__PURE__*/_react.default.createElement(_Select.Select, {
-    id: "framework",
-    name: "framework",
-    label: "Framework",
-    options: options,
-    value: value,
-    creatable: true,
-    onChange: handleChange
-  }), /*#__PURE__*/_react.default.createElement("p", {
-    style: {
-      marginTop: '12px',
-      fontSize: '12px',
-      color: '#666'
-    }
-  }, "Selected: ", /*#__PURE__*/_react.default.createElement("strong", null, value || '(none)')), /*#__PURE__*/_react.default.createElement("p", {
-    style: {
-      marginTop: '8px',
-      fontSize: '12px',
-      color: '#666'
-    }
-  }, "Options: ", options.map(o => o.label).join(', ')));
-};
-
-// Creatable with custom label
-exports.Creatable = Creatable;
-const CreatableCustomLabel = () => {
-  const [value, setValue] = (0, _react.useState)('');
-  const tagOptions = [{
-    key: 'bug',
-    value: 'bug',
-    label: 'Bug'
-  }, {
-    key: 'feature',
-    value: 'feature',
-    label: 'Feature'
-  }, {
-    key: 'docs',
-    value: 'docs',
-    label: 'Documentation'
-  }];
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
-    style: {
-      marginBottom: '16px',
-      fontSize: '14px'
-    }
-  }, "Custom \"create\" label format"), /*#__PURE__*/_react.default.createElement(_Select.Select, {
-    id: "tag",
-    name: "tag",
-    label: "Add Tag",
-    options: tagOptions,
-    value: value,
-    creatable: true,
-    formatCreateLabel: inputValue => "+ Add new tag: ".concat(inputValue),
-    onChange: _ref8 => {
-      let {
-        value: newValue
-      } = _ref8;
-      return setValue(newValue);
-    }
-  }), /*#__PURE__*/_react.default.createElement("p", {
-    style: {
-      marginTop: '12px',
-      fontSize: '12px',
-      color: '#666'
-    }
-  }, "Selected: ", /*#__PURE__*/_react.default.createElement("strong", null, value || '(none)')));
-};
-exports.CreatableCustomLabel = CreatableCustomLabel;

package/dist/components/InvestCalculator/InvestCalculator.stories.js

@@ -1,135 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.InvestCalculatorOverview = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _InvestCalculator = require("./InvestCalculator");
-var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
-var _global = _interopRequireDefault(require("../../styles/global"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-////  U N F I N I S H E D  ////
-var _default = exports.default = {
-  title: 'Components Library/InvestCalculator',
-  component: _InvestCalculator.InvestCalculator,
-  argTypes: {
-    minTokensCount: {
-      type: 'number',
-      required: true,
-      defaultValue: 0
-    },
-    available: {
-      type: 'number',
-      required: true
-    },
-    tokenName: {
-      type: 'string',
-      required: true
-    },
-    id: {
-      type: 'string',
-      required: true
-    },
-    name: {
-      type: 'string',
-      defaultValue: '',
-      required: true
-    },
-    onChange: {
-      type: 'function',
-      action: 'onChange',
-      defaultValue: () => {}
-    },
-    onBlur: {
-      type: 'function',
-      action: 'onBlur',
-      defaultValue: () => {}
-    },
-    onFocus: {
-      type: 'function',
-      action: 'onFocus',
-      defaultValue: () => {}
-    },
-    onErrors: {
-      type: 'function',
-      action: 'onErrors',
-      defaultValue: () => {}
-    },
-    exchangeRate: {
-      type: 'shape',
-      defaultValue: {},
-      required: true
-    },
-    maxFunds: {
-      type: 'shape',
-      defaultValue: {},
-      required: true
-    },
-    //not props
-    changeCurrencyValue: {
-      type: 'function',
-      action: 'changeCurrencyValue',
-      defaultValue: () => {}
-    },
-    changeTokens: {
-      type: 'function',
-      action: 'changeTokens',
-      defaultValue: () => {}
-    },
-    tokens: {
-      type: 'number'
-    },
-    tokensInput: {
-      type: 'number'
-    },
-    currencyValueInput: {
-      type: 'number'
-    },
-    currencyValue: {
-      type: 'number'
-    },
-    state: {
-      type: 'shape',
-      defaultValue: {
-        tokens: 0,
-        currencyValue: 0,
-        selectedCurrencyValue: 0,
-        userSelectedCurrency: 'ether'
-      }
-    }
-  }
-};
-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(_InvestCalculator.InvestCalculator, args)));
-const InvestCalculatorOverview = exports.InvestCalculatorOverview = Template.bind({});
-InvestCalculatorOverview.args = {
-  minTokensCount: 3,
-  available: 345,
-  tokenName: 'STOKR TEST',
-  id: 'I-D',
-  name: 'John Doe',
-  exchangeRate: {
-    [_InvestCalculator.InvestCalculatorCurrencies.ETH]: 222,
-    [_InvestCalculator.InvestCalculatorCurrencies.EUR]: 111
-  },
-  maxFunds: {
-    [_InvestCalculator.InvestCalculatorCurrencies.CRYPTO]: 333,
-    [_InvestCalculator.InvestCalculatorCurrencies.EUR]: 222
-  },
-  tokens: 444,
-  tokensInput: 666,
-  currencyValueInput: 400
-};
-
-//doublecheck:
-//UNFINISHED
-// square brackets waitng for evaluation (string) - so imported
-// [InvestCalculatorCurrencies.CRYPTO]
-//
-// NOT PROPs propped in..
-// state prop made up... not changing anything
-//changeTokens
-//tokensInput
-//tokens
-//
-// ?(onChange - target - currencyName -)/ state - selectedCurrency

package/dist/components/InvestmentStat/InvestmentStat.stories.js

@@ -1,52 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.InvestmentStatOverview = exports.InvestmentStatBlueTooltip = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _InvestmentStat = _interopRequireDefault(require("./InvestmentStat"));
-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/InvestmentStat',
-  component: _InvestmentStat.default,
-  argTypes: {
-    title: {
-      type: 'string',
-      defaultValue: '',
-      required: true
-    },
-    content: {
-      type: 'string',
-      defaultValue: '',
-      required: true
-    },
-    state: {
-      type: 'string',
-      defaultValue: ''
-    },
-    tooltip: {
-      type: 'string',
-      defaultValue: ''
-    },
-    primaryBg: {
-      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(_InvestmentStat.default, args)));
-const InvestmentStatOverview = exports.InvestmentStatOverview = Template.bind({});
-InvestmentStatOverview.args = {
-  title: 'Investment Stat Title',
-  content: 'some Content'
-};
-const InvestmentStatBlueTooltip = exports.InvestmentStatBlueTooltip = Template.bind({});
-InvestmentStatBlueTooltip.args = {
-  title: 'Investment Stat Title',
-  content: 'some Content',
-  primaryBg: true,
-  tooltip: 'information'
-};