@invoicebox/ui 0.1.0-alpha.6 → 0.1.0-alpha.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.js +11 -4
  2. package/dist/stories/Button.js +41 -36
  3. package/dist/stories/Button.stories.js +41 -36
  4. package/dist/stories/styles.d.ts +2 -9
  5. package/dist/stories/styles.js +27 -28
  6. package/package.json +10 -3
package/dist/index.js CHANGED
@@ -1,5 +1,12 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Button = void 0;
4
- var Button_1 = require("./stories/Button");
5
- Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "Button", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _Button.Button;
10
+ }
11
+ });
12
+ var _Button = require("./stories/Button");
package/dist/stories/Button.js CHANGED
@@ -1,41 +1,46 @@
1
1
  "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __rest = (this && this.__rest) || function (s, e) {
14
- var t = {};
15
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
- t[p] = s[p];
17
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
- t[p[i]] = s[p[i]];
21
- }
22
- return t;
23
- };
24
- Object.defineProperty(exports, "__esModule", { value: true });
2
+
3
+ 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); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
25
7
  exports.Button = void 0;
26
- var jsx_runtime_1 = require("react/jsx-runtime");
27
- var styles_1 = require("./styles");
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _styles = _interopRequireWildcard(require("./styles"));
10
+ var S = _styles;
11
+ var _excluded = ["primary", "size", "backgroundColor", "label"];
12
+ 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); }
13
+ 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; }
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
15
+ 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); }
16
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
17
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
18
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
19
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
20
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
21
+ 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; }
22
+ 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; }
28
23
  /**
29
24
  * Primary UI component for user interaction
30
25
  */
31
- var Button = function (_a) {
32
- var _b = _a.primary, primary = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, backgroundColor = _a.backgroundColor, label = _a.label, props = __rest(_a, ["primary", "size", "backgroundColor", "label"]);
33
- var modeStyles = primary ? styles_1.primaryStyles : styles_1.secondaryStyles;
34
- var sizeStyles = {
35
- small: styles_1.smallStyles,
36
- medium: styles_1.mediumStyles,
37
- large: styles_1.largeStyles,
38
- }[size];
39
- return ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", style: __assign(__assign(__assign(__assign({}, styles_1.wrapperStyles), modeStyles), sizeStyles), (backgroundColor ? { backgroundColor: backgroundColor } : {})) }, props, { children: label })));
40
- };
41
- exports.Button = Button;
26
+ var Button = exports.Button = function Button(_ref) {
27
+ var _ref$primary = _ref.primary,
28
+ primary = _ref$primary === void 0 ? false : _ref$primary,
29
+ _ref$size = _ref.size,
30
+ size = _ref$size === void 0 ? 'medium' : _ref$size,
31
+ backgroundColor = _ref.backgroundColor,
32
+ label = _ref.label,
33
+ props = _objectWithoutProperties(_ref, _excluded);
34
+ var modeStyles = primary ? _styles.primaryStyles : _styles.secondaryStyles;
35
+ var sizeStyles = {
36
+ small: _styles.smallStyles,
37
+ medium: _styles.mediumStyles,
38
+ large: _styles.largeStyles
39
+ }[size];
40
+ return /*#__PURE__*/_react["default"].createElement(S.Wrapper, _extends({
41
+ type: "button",
42
+ style: _objectSpread(_objectSpread(_objectSpread({}, modeStyles), sizeStyles), backgroundColor ? {
43
+ backgroundColor: backgroundColor
44
+ } : {})
45
+ }, props), label);
46
+ };
package/dist/stories/Button.stories.js CHANGED
@@ -1,44 +1,49 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Small = exports.Large = exports.Secondary = exports.Primary = void 0;
4
- var Button_1 = require("./Button");
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = exports.Small = exports.Secondary = exports.Primary = exports.Large = void 0;
7
+ var _Button = require("./Button");
5
8
  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
6
9
  var meta = {
7
- title: 'Example/Button',
8
- component: Button_1.Button,
9
- parameters: {
10
- // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
11
- layout: 'centered',
12
- },
13
- // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
14
- tags: ['autodocs'],
15
- // More on argTypes: https://storybook.js.org/docs/api/argtypes
16
- argTypes: {
17
- backgroundColor: { control: 'color' },
18
- },
10
+ title: 'Example/Button',
11
+ component: _Button.Button,
12
+ parameters: {
13
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
14
+ layout: 'centered'
15
+ },
16
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
17
+ tags: ['autodocs'],
18
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
19
+ argTypes: {
20
+ backgroundColor: {
21
+ control: 'color'
22
+ }
23
+ }
19
24
  };
20
- exports.default = meta;
25
+ var _default = exports["default"] = meta;
21
26
  // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
22
- exports.Primary = {
23
- args: {
24
- primary: true,
25
- label: 'Button',
26
- },
27
+ var Primary = exports.Primary = {
28
+ args: {
29
+ primary: true,
30
+ label: 'Button'
31
+ }
27
32
  };
28
- exports.Secondary = {
29
- args: {
30
- label: 'Button',
31
- },
33
+ var Secondary = exports.Secondary = {
34
+ args: {
35
+ label: 'Button'
36
+ }
32
37
  };
33
- exports.Large = {
34
- args: {
35
- size: 'large',
36
- label: 'Button',
37
- },
38
- };
39
- exports.Small = {
40
- args: {
41
- size: 'small',
42
- label: 'Button',
43
- },
38
+ var Large = exports.Large = {
39
+ args: {
40
+ size: 'large',
41
+ label: 'Button'
42
+ }
44
43
  };
44
+ var Small = exports.Small = {
45
+ args: {
46
+ size: 'small',
47
+ label: 'Button'
48
+ }
49
+ };
package/dist/stories/styles.d.ts CHANGED
@@ -1,12 +1,5 @@
1
- export declare const wrapperStyles: {
2
- fontFamily: string;
3
- fontWeight: number;
4
- border: number;
5
- borderRadius: string;
6
- cursor: string;
7
- display: string;
8
- lineHeight: number;
9
- };
1
+ /// <reference types="react" />
2
+ export declare const Wrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>;
10
3
  export declare const primaryStyles: {
11
4
  color: string;
12
5
  backgroundColor: string;
package/dist/stories/styles.js CHANGED
@@ -1,33 +1,32 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.largeStyles = exports.mediumStyles = exports.smallStyles = exports.secondaryStyles = exports.primaryStyles = exports.wrapperStyles = void 0;
4
- exports.wrapperStyles = {
5
- fontFamily: "'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif",
6
- fontWeight: 700,
7
- border: 0,
8
- borderRadius: '3em',
9
- cursor: 'pointer',
10
- display: 'inline-block',
11
- lineHeight: 1,
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.smallStyles = exports.secondaryStyles = exports.primaryStyles = exports.mediumStyles = exports.largeStyles = exports.Wrapper = void 0;
7
+ var _styledComponents = require("styled-components");
8
+ var Wrapper = exports.Wrapper = _styledComponents.styled.button.withConfig({
9
+ displayName: "styles__Wrapper",
10
+ componentId: "sc-11ohbjf-0"
11
+ })(["font-family:'Nunito Sans','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;border:0;border-radius:3em;cursor:pointer;display:inline-block;line-height:1;"]);
12
+ var primaryStyles = exports.primaryStyles = {
13
+ color: 'white',
14
+ backgroundColor: '#1ea7fd'
12
15
  };
13
- exports.primaryStyles = {
14
- color: 'white',
15
- backgroundColor: '#1ea7fd',
16
+ var secondaryStyles = exports.secondaryStyles = {
17
+ color: '#333',
18
+ backgroundColor: 'transparent',
19
+ boxShadow: 'rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset'
16
20
  };
17
- exports.secondaryStyles = {
18
- color: '#333',
19
- backgroundColor: 'transparent',
20
- boxShadow: 'rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset',
21
+ var smallStyles = exports.smallStyles = {
22
+ fontSize: '12px',
23
+ padding: '10px 16px'
21
24
  };
22
- exports.smallStyles = {
23
- fontSize: '12px',
24
- padding: '10px 16px',
25
- };
26
- exports.mediumStyles = {
27
- fontSize: '14px',
28
- padding: '11px 20px',
29
- };
30
- exports.largeStyles = {
31
- fontSize: '16px',
32
- padding: '12px 24px',
25
+ var mediumStyles = exports.mediumStyles = {
26
+ fontSize: '14px',
27
+ padding: '11px 20px'
33
28
  };
29
+ var largeStyles = exports.largeStyles = {
30
+ fontSize: '16px',
31
+ padding: '12px 24px'
32
+ };
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@invoicebox/ui",
3
- "version": "0.1.0-alpha.6",
3
+ "version": "0.1.0-alpha.8",
4
4
  "description": "Invoicebox UI",
5
5
  "license": "ISC",
6
6
  "scripts": {
7
7
  "storybook": "storybook dev -p 6006",
8
8
  "build-storybook": "storybook build",
9
- "build": "tsc --project tsconfig.json",
10
- "release": "git checkout main && git merge develop && git push && npm run build && npm publish && git checkout develop"
9
+ "build": "babel src --extensions .ts,.tsx --out-dir dist && tsc --project tsconfig.json",
10
+ "release": "git checkout develop && npm run build && npm version $VERSION && git push && git push --tags && git checkout main && git merge develop && git push && npm publish && git checkout develop"
11
11
  },
12
12
  "bugs": {
13
13
  "url": "https://github.com/InvoiceBox/invoicebox-ui/issues"
@@ -18,7 +18,12 @@
18
18
  },
19
19
  "homepage": "https://github.com/InvoiceBox/invoicebox-ui#readme",
20
20
  "devDependencies": {
21
+ "@babel/cli": "^7.23.9",
22
+ "@babel/core": "^7.23.9",
21
23
  "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
24
+ "@babel/preset-env": "^7.23.9",
25
+ "@babel/preset-react": "^7.23.3",
26
+ "@babel/preset-typescript": "^7.23.3",
22
27
  "@storybook/addon-essentials": "^7.6.13",
23
28
  "@storybook/addon-interactions": "^7.6.13",
24
29
  "@storybook/addon-links": "^7.6.13",
@@ -30,6 +35,7 @@
30
35
  "@storybook/test": "^7.6.13",
31
36
  "@typescript-eslint/eslint-plugin": "^5.62.0",
32
37
  "@typescript-eslint/parser": "^5.62.0",
38
+ "babel-plugin-styled-components": "^2.1.4",
33
39
  "eslint": "^8.56.0",
34
40
  "eslint-config-prettier": "^9.1.0",
35
41
  "eslint-plugin-prettier": "^5.1.3",
@@ -37,6 +43,7 @@
37
43
  "prettier": "^3.2.5",
38
44
  "prop-types": "^15.8.1",
39
45
  "storybook": "^7.6.13",
46
+ "styled-components": "^6.1.8",
40
47
  "typescript": "^4.9.5",
41
48
  "webpack": "^5.90.1"
42
49
  },