@invoicebox/ui 0.1.0-alpha.11 → 0.1.0-alpha.12

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

@@ -1,2 +1,6 @@
 import { FC } from 'react';
-export declare const Skeleton: FC;
+export type TProps = {
+    width?: string;
+    height?: string;
+};
+export declare const Skeleton: FC<TProps>;

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

@@ -10,6 +10,11 @@ var S = _interopRequireWildcard(require("./styles"));
 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 }; }
-var Skeleton = exports.Skeleton = function Skeleton() {
-  return /*#__PURE__*/_react["default"].createElement(S.Wrapper, null, /*#__PURE__*/_react["default"].createElement(S.Inner, null));
+var Skeleton = exports.Skeleton = function Skeleton(_ref) {
+  var width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
+    $width: width,
+    $height: height
+  }, /*#__PURE__*/_react["default"].createElement(S.Inner, null));
 };

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

@@ -1,12 +1,14 @@
 /// <reference types="react" />
 import type { StoryObj } from '@storybook/react';
+import { Skeleton, TProps } from '.';
 declare const meta: {
     title: string;
-    component: import("react").FC<{}>;
+    component: import("react").FC<TProps>;
     tags: string[];
 };
 export default meta;
-export declare const Primary: StoryObj<{
-    width: number;
-    height: number;
+export declare const ByContainer: StoryObj<TProps & {
+    containerWidth: number;
+    containerHeight: number;
 }>;
+export declare const ByOwnSize: StoryObj<typeof Skeleton>;

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

@@ -3,25 +3,37 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Primary = void 0;
+exports["default"] = exports.ByOwnSize = exports.ByContainer = void 0;
 var _ = require(".");
+var _excluded = ["containerWidth", "containerHeight"];
+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; }
 var meta = {
   title: 'Common/Skeleton',
   component: _.Skeleton,
   tags: ['autodocs']
 };
 var _default = exports["default"] = meta;
-var Primary = exports.Primary = {
+var ByContainer = exports.ByContainer = {
   args: {
-    width: 100,
-    height: 200
+    containerWidth: 200,
+    containerHeight: 100
   },
-  render: function render(args) {
+  render: function render(_ref) {
+    var containerWidth = _ref.containerWidth,
+      containerHeight = _ref.containerHeight,
+      rest = _objectWithoutProperties(_ref, _excluded);
     return /*#__PURE__*/React.createElement("div", {
       style: {
-        width: args.width,
-        height: args.height
+        width: containerWidth,
+        height: containerHeight
       }
-    }, /*#__PURE__*/React.createElement(_.Skeleton, null));
+    }, /*#__PURE__*/React.createElement(_.Skeleton, rest));
+  }
+};
+var ByOwnSize = exports.ByOwnSize = {
+  args: {
+    width: '200px',
+    height: '100px'
   }
 };

package/dist/components/common/Skeleton/styles.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
-export declare const Wrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const Wrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $width?: string | undefined;
+    $height?: string | undefined;
+}>>;
 export declare const Inner: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/dist/components/common/Skeleton/styles.js

@@ -12,7 +12,13 @@ var shine = (0, _styledComponents.keyframes)(["0%{left:calc(0% - 200px);}100%{le
 var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__Wrapper",
   componentId: "sc-mb3gd0-0"
-})(["width:100%;height:100%;border-radius:10px;overflow:hidden;position:relative;background:#f1f2f6;"]);
+})(["width:", ";height:", ";border-radius:10px;overflow:hidden;position:relative;background:#f1f2f6;"], function (_ref) {
+  var $width = _ref.$width;
+  return $width !== null && $width !== void 0 ? $width : '100%';
+}, function (_ref2) {
+  var $height = _ref2.$height;
+  return $height !== null && $height !== void 0 ? $height : '100%';
+});
 var Inner = exports.Inner = _styledComponents["default"].div.withConfig({
   displayName: "styles__Inner",
   componentId: "sc-mb3gd0-1"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.11",
+    "version": "0.1.0-alpha.12",
     "description": "Invoicebox UI",
     "license": "ISC",
     "scripts": {