@invoicebox/ui 0.1.0-alpha.26 → 0.1.0-alpha.28

package/dist/components/common/Arrow/components/StyledSvg/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const StyledSvg: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("../Svg").TProps, {
+    $isOpen: boolean;
+    $isLight: boolean;
+    $openLightColor: string;
+    $closeLightColor: string;
+    $openUsualColor: string;
+    $closeUsualColor: string;
+    $padding: number;
+    $defaultRotate: number;
+}>> & Omit<import("react").FC<import("../Svg").TProps>, keyof import("react").Component<any, {}, any>>;

package/dist/components/common/Arrow/components/StyledSvg/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSvg = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Svg = require("../Svg");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var StyledSvg = exports.StyledSvg = (0, _styledComponents["default"])(_Svg.Svg).withConfig({
+  displayName: "StyledSvg",
+  componentId: "sc-8dnufv-0"
+})(["transform:rotateZ(", "deg);transition:all 0.2s ease-in-out 0s;box-sizing:content-box;padding:", "px;path{stroke:", ";"], function (_ref) {
+  var $isOpen = _ref.$isOpen,
+    $defaultRotate = _ref.$defaultRotate;
+  return $isOpen ? $defaultRotate + 180 : $defaultRotate;
+}, function (_ref2) {
+  var $padding = _ref2.$padding;
+  return $padding;
+}, function (_ref3) {
+  var $isLight = _ref3.$isLight,
+    $isOpen = _ref3.$isOpen,
+    $openLightColor = _ref3.$openLightColor,
+    $closeLightColor = _ref3.$closeLightColor,
+    $openUsualColor = _ref3.$openUsualColor,
+    $closeUsualColor = _ref3.$closeUsualColor;
+  if ($isLight && $isOpen) return $openLightColor;
+  if ($isLight && !$isOpen) return $closeLightColor;
+  if (!$isLight && $isOpen) return $openUsualColor;
+  if (!$isLight && !$isOpen) return $closeUsualColor;
+});

package/dist/components/common/Arrow/components/StyledSvg/index.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { StyledSvg } from '.';
+declare const meta: Meta<typeof StyledSvg>;
+export default meta;
+export declare const Default: StoryObj<typeof StyledSvg>;

package/dist/components/common/Arrow/components/StyledSvg/index.stories.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _ = require(".");
+var meta = {
+  title: 'common/Arrow/_components/StyledSvg',
+  component: _.StyledSvg,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered'
+  }
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {
+  args: {
+    $isOpen: false,
+    $isLight: false,
+    $openLightColor: '#cfc',
+    $closeLightColor: '#cac',
+    $openUsualColor: '#05b',
+    $closeUsualColor: '#00b',
+    size: 10,
+    $padding: 7,
+    $defaultRotate: 0
+  }
+};

package/dist/components/common/Arrow/components/Svg/index.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export type TProps = {
+    className?: string;
+    size: number;
+};
+export declare const Svg: FC<TProps>;

package/dist/components/common/Arrow/components/Svg/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Svg = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var Svg = exports.Svg = function Svg(_ref) {
+  var className = _ref.className,
+    size = _ref.size;
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    className: className,
+    width: size,
+    height: size,
+    viewBox: "7 7 10 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M16.0846 9.95825L12.0013 14.0416L7.91797 9.95825",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};

package/dist/components/common/Arrow/components/Svg/index.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Svg, TProps } from '.';
+declare const meta: Meta<typeof Svg>;
+export default meta;
+type TStory = StoryObj<TProps>;
+export declare const Default: TStory;

package/dist/components/common/Arrow/components/Svg/index.stories.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _ = require(".");
+var meta = {
+  title: 'common/Arrow/_components/Svg',
+  component: _.Svg,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered'
+  }
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {
+  args: {
+    size: 10
+  }
+};

package/dist/components/common/Arrow/index.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { TArrowPalette } from './palette';
+export type TProps = {
+    isOpen: boolean;
+    isLight?: boolean;
+    innerSize?: number;
+    outterSize?: number;
+    defaultRotate?: number;
+    palette?: Partial<TArrowPalette>;
+};
+export declare const Arrow: FC<TProps>;

package/dist/components/common/Arrow/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Arrow = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StyledSvg = require("./components/StyledSvg");
+var _palette = require("../../../palette");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var Arrow = exports.Arrow = function Arrow(_ref) {
+  var isOpen = _ref.isOpen,
+    _ref$isLight = _ref.isLight,
+    isLight = _ref$isLight === void 0 ? false : _ref$isLight,
+    _ref$innerSize = _ref.innerSize,
+    innerSize = _ref$innerSize === void 0 ? 10 : _ref$innerSize,
+    _ref$outterSize = _ref.outterSize,
+    outterSize = _ref$outterSize === void 0 ? 24 : _ref$outterSize,
+    _ref$defaultRotate = _ref.defaultRotate,
+    defaultRotate = _ref$defaultRotate === void 0 ? 0 : _ref$defaultRotate,
+    palette = _ref.palette;
+  var mergedPalette = (0, _palette.useComponentPalette)('arrow', palette);
+  return /*#__PURE__*/_react["default"].createElement(_StyledSvg.StyledSvg, {
+    $isOpen: isOpen,
+    $isLight: isLight,
+    $openLightColor: mergedPalette.openLight,
+    $closeLightColor: mergedPalette.closeLight,
+    $openUsualColor: mergedPalette.openUsual,
+    $closeUsualColor: mergedPalette.closeUsual,
+    size: innerSize,
+    $padding: (outterSize - innerSize) / 2,
+    $defaultRotate: defaultRotate
+  });
+};

package/dist/components/common/Arrow/index.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Arrow, TProps } from '.';
+declare const meta: Meta<typeof Arrow>;
+export default meta;
+type TStory = StoryObj<TProps>;
+export declare const Default: TStory;

package/dist/components/common/Arrow/index.stories.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _ = require(".");
+var meta = {
+  title: 'common/Arrow',
+  component: _.Arrow,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {
+  args: {
+    isOpen: false,
+    isLight: false,
+    innerSize: 10,
+    outterSize: 24,
+    defaultRotate: 0
+  }
+};

package/dist/components/common/Arrow/palette.d.ts

@@ -0,0 +1,8 @@
+import { TAbstractPalette } from '../../../palette';
+export type TArrowPalette = {
+    openLight: string;
+    closeLight: string;
+    openUsual: string;
+    closeUsual: string;
+};
+export declare const generateArrowPalette: (abstractPalette: TAbstractPalette) => TArrowPalette;

package/dist/components/common/Arrow/palette.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateArrowPalette = void 0;
+var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var generateArrowPalette = exports.generateArrowPalette = function generateArrowPalette(abstractPalette) {
+  return {
+    openLight: (0, _hexToRgba["default"])(abstractPalette.neutralUsual, 0.8),
+    closeLight: (0, _hexToRgba["default"])(abstractPalette.neutralUsual, 0.8),
+    openUsual: (0, _hexToRgba["default"])(abstractPalette.primary, 0.5),
+    closeUsual: (0, _hexToRgba["default"])(abstractPalette.primary, 0.5)
+  };
+};

package/dist/components/common/Typography/index.js

@@ -5,13 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TypographyGlobalStyle = exports.Typography = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var S = _interopRequireWildcard(require("./styles"));
-var _reactHelmet = require("react-helmet");
 var _excluded = ["variant", "element"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -26,15 +24,26 @@ var Typography = exports.Typography = function Typography(_ref) {
   }, rest));
 };
 var TypographyGlobalStyle = exports.TypographyGlobalStyle = function TypographyGlobalStyle() {
-  return /*#__PURE__*/_react["default"].createElement(_reactHelmet.Helmet, null, /*#__PURE__*/_react["default"].createElement("link", {
-    rel: "preconnect",
-    href: "https://fonts.googleapis.com"
-  }), /*#__PURE__*/_react["default"].createElement("link", {
-    rel: "preconnect",
-    href: "https://fonts.gstatic.com",
-    crossOrigin: true
-  }), /*#__PURE__*/_react["default"].createElement("link", {
-    href: "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap",
-    rel: "stylesheet"
-  }));
+  (0, _react.useEffect)(function () {
+    var primaryLink = document.createElement('link');
+    primaryLink.rel = 'preconnect';
+    primaryLink.href = 'https://fonts.googleapis.com';
+    var secondaryLink = document.createElement('link');
+    secondaryLink.rel = 'preconnect';
+    secondaryLink.href = 'https://fonts.gstatic.com';
+    secondaryLink.crossOrigin = '';
+    var thirdLink = document.createElement('link');
+    thirdLink.rel = 'stylesheet';
+    thirdLink.href = 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap';
+    var links = [primaryLink, secondaryLink, thirdLink];
+    links.forEach(function (link) {
+      return document.head.appendChild(link);
+    });
+    return function () {
+      links.forEach(function (link) {
+        return document.head.removeChild(link);
+      });
+    };
+  }, []);
+  return null;
 };

package/dist/index.d.ts

@@ -3,4 +3,5 @@ export { InvoiceboxLoader } from './components/common/InvoiceboxLoader';
 export { Typography, TypographyGlobalStyle } from './components/common/Typography';
 export { InvoiceboxSpinner } from './components/common/InvoiceboxSpinner';
 export { SecondaryButton } from './components/common/SecondaryButton';
+export { Arrow } from './components/common/Arrow';
 export { PaletteProvider } from './palette';

package/dist/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "Arrow", {
+  enumerable: true,
+  get: function get() {
+    return _Arrow.Arrow;
+  }
+});
 Object.defineProperty(exports, "InvoiceboxLoader", {
   enumerable: true,
   get: function get() {
@@ -50,4 +56,5 @@ var _InvoiceboxLoader = require("./components/common/InvoiceboxLoader");
 var _Typography = require("./components/common/Typography");
 var _InvoiceboxSpinner = require("./components/common/InvoiceboxSpinner");
 var _SecondaryButton = require("./components/common/SecondaryButton");
+var _Arrow = require("./components/common/Arrow");
 var _palette = require("./palette");

package/dist/palette/context.d.ts

@@ -2,10 +2,12 @@
 import { TSkeletonPalette } from '../components/common/Skeleton/palette';
 import { TInvoiceboxSpinnerPalette } from '../components/common/InvoiceboxSpinner/palette';
 import { TSecondaryButtonPalette } from '../components/common/SecondaryButton/palette';
+import { TArrowPalette } from '../components/common/Arrow/palette';
 type TContext = {
     skeleton: TSkeletonPalette;
     invoiceboxSpinner: TInvoiceboxSpinnerPalette;
     secondaryButton: TSecondaryButtonPalette;
+    arrow: TArrowPalette;
 };
 export declare const PaletteContext: import("react").Context<TContext>;
 export {};

package/dist/palette/context.js

@@ -9,8 +9,10 @@ var _constants = require("./constants");
 var _palette = require("../components/common/Skeleton/palette");
 var _palette2 = require("../components/common/InvoiceboxSpinner/palette");
 var _palette3 = require("../components/common/SecondaryButton/palette");
+var _palette4 = require("../components/common/Arrow/palette");
 var PaletteContext = exports.PaletteContext = /*#__PURE__*/(0, _react.createContext)({
   skeleton: (0, _palette.generateSkeletonPalette)(_constants.defaultAbstractPalette),
   invoiceboxSpinner: (0, _palette2.generateInvoiceboxSpinnerPalette)(_constants.defaultAbstractPalette),
-  secondaryButton: (0, _palette3.generateSecondaryButtonPalette)(_constants.defaultAbstractPalette)
+  secondaryButton: (0, _palette3.generateSecondaryButtonPalette)(_constants.defaultAbstractPalette),
+  arrow: (0, _palette4.generateArrowPalette)(_constants.defaultAbstractPalette)
 });

package/dist/palette/provider.d.ts

@@ -3,12 +3,14 @@ import { TSkeletonPalette } from '../components/common/Skeleton/palette';
 import { TAbstractPalette } from './types';
 import { TInvoiceboxSpinnerPalette } from '../components/common/InvoiceboxSpinner/palette';
 import { TSecondaryButtonPalette } from '../components/common/SecondaryButton/palette';
+import { TArrowPalette } from '../components/common/Arrow/palette';
 type TProps = {
     children: ReactNode;
     abstract?: Partial<TAbstractPalette>;
     skeleton?: Partial<TSkeletonPalette>;
     invoiceboxSpinner?: Partial<TInvoiceboxSpinnerPalette>;
     secondaryButton?: Partial<TSecondaryButtonPalette>;
+    arrow?: Partial<TArrowPalette>;
 };
 export declare const PaletteProvider: FC<TProps>;
 export {};

package/dist/palette/provider.js

@@ -10,6 +10,7 @@ var _constants = require("./constants");
 var _context = require("./context");
 var _palette2 = require("../components/common/InvoiceboxSpinner/palette");
 var _palette3 = require("../components/common/SecondaryButton/palette");
+var _palette4 = require("../components/common/Arrow/palette");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
@@ -23,7 +24,8 @@ var PaletteProvider = exports.PaletteProvider = function PaletteProvider(_ref) {
     _abstract = _ref["abstract"],
     skeleton = _ref.skeleton,
     invoiceboxSpinner = _ref.invoiceboxSpinner,
-    secondaryButton = _ref.secondaryButton;
+    secondaryButton = _ref.secondaryButton,
+    arrow = _ref.arrow;
   var mergedAbstractPalette = (0, _react.useMemo)(function () {
     return _objectSpread(_objectSpread({}, _constants.defaultAbstractPalette), _abstract);
   }, [_abstract]);
@@ -36,13 +38,17 @@ var PaletteProvider = exports.PaletteProvider = function PaletteProvider(_ref) {
   var mergedSecondaryButtonPalette = (0, _react.useMemo)(function () {
     return _objectSpread(_objectSpread({}, (0, _palette3.generateSecondaryButtonPalette)(mergedAbstractPalette)), secondaryButton);
   }, [mergedAbstractPalette, secondaryButton]);
+  var mergedArrowPalette = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, (0, _palette4.generateArrowPalette)(mergedAbstractPalette)), arrow);
+  }, [mergedAbstractPalette, arrow]);
   var value = (0, _react.useMemo)(function () {
     return {
       skeleton: mergedSkeletonPalette,
       invoiceboxSpinner: mergedInvoiceboxSpinnerPalette,
-      secondaryButton: mergedSecondaryButtonPalette
+      secondaryButton: mergedSecondaryButtonPalette,
+      arrow: mergedArrowPalette
     };
-  }, [mergedSkeletonPalette, mergedInvoiceboxSpinnerPalette, mergedSecondaryButtonPalette]);
+  }, [mergedSkeletonPalette, mergedInvoiceboxSpinnerPalette, mergedSecondaryButtonPalette, mergedArrowPalette]);
   return /*#__PURE__*/_react["default"].createElement(_context.PaletteContext.Provider, {
     value: value
   }, children);

package/dist/palette/usePalette.d.ts

@@ -2,4 +2,5 @@ export declare const usePalette: () => {
     skeleton: import("../components/common/Skeleton/palette").TSkeletonPalette;
     invoiceboxSpinner: import("../components/common/InvoiceboxSpinner/palette").TInvoiceboxSpinnerPalette;
     secondaryButton: import("../components/common/SecondaryButton/palette").TSecondaryButtonPalette;
+    arrow: import("../components/common/Arrow/palette").TArrowPalette;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.26",
+    "version": "0.1.0-alpha.28",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {
@@ -30,7 +30,6 @@
         "@storybook/react": "^7.6.13",
         "@storybook/react-webpack5": "^7.6.13",
         "@storybook/test": "^7.6.13",
-        "@types/react-helmet": "^6.1.11",
         "@typescript-eslint/eslint-plugin": "^5.62.0",
         "@typescript-eslint/parser": "^5.62.0",
         "babel-plugin-inline-json-import": "^0.3.2",
@@ -48,8 +47,8 @@
         "webpack": "^5.90.1"
     },
     "dependencies": {
+        "hex-to-rgba": "^2.0.1",
         "lottie-react": "^2.4.0",
-        "react-helmet": "^6.1.0",
         "styled-components": "^6.1.8"
     },
     "peerDependencies": {