@convertkit/design - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

buttons/button.js

@@ -1,16 +0,1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _extends() { _extends = Object.assign || 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); }
@@ -22,5 +7,8 @@
 
+import React from "react";
+import PropTypes from "prop-types";
+import cx from "classnames";
 var DEFAULT = "inline-block rounded-sm border border-solid leading-tight";
 var COLORS = {
-  gray: "text-black bg-gray-200 border-gray-200 hover:bg-gray-300 hover:border-gray-300",
+  gray: "text-gray-600 bg-gray-300 border-gray-300 hover:text-black hover:bg-gray-400 hover:border-gray-400",
   red: "text-white bg-red-400 border-red-400 hover:bg-red-500 hover:border-red-500",
@@ -30,4 +18,4 @@ white: "text-gray-600 bg-white border-gray-400 hover:bg-gray-100"
 var SIZES = {
-  md: "text-sm px-2 py-2",
-  lg: "text-lg px-4 py-2"
+  md: "text-sm px-4 py-2",
+  lg: "text-lg px-8 py-2"
 };
@@ -49,5 +37,5 @@ /**
 
-  var className = (0, _classnames["default"])(props.className, DEFAULT, COLORS[color], SIZES[size]);
+  var className = cx(props.className, DEFAULT, COLORS[color], SIZES[size]);
   var Component = as;
-  return _react["default"].createElement(Component, _extends({}, props, {
+  return React.createElement(Component, _extends({}, props, {
     className: className
@@ -58,6 +46,5 @@ }));
 Button.propTypes = {
-  color: _propTypes["default"].oneOf(["gray", "red", "white"]),
-  size: _propTypes["default"].oneOf(["md", "lg"])
+  color: PropTypes.oneOf(["gray", "red", "white"]),
+  size: PropTypes.oneOf(["md", "lg"])
 };
-var _default = Button;
-exports["default"] = _default;
+export default Button;

buttons/index.js

@@ -1,21 +0,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "LinkButton", {
-  enumerable: true,
-  get: function get() {
-    return _linkButton["default"];
-  }
-});
-exports["default"] = void 0;
-
-var _button = _interopRequireDefault(require("./button"));
-
-var _linkButton = _interopRequireDefault(require("./link-button"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var _default = _button["default"];
-exports["default"] = _default;
+import Button from "./button";
+import LinkButton from "./link-button";
+export { LinkButton };
+export default Button;

buttons/link-button.js

@@ -1,16 +0,1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _button = _interopRequireDefault(require("./button"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -24,6 +9,10 @@
 
+import React from "react";
+import PropTypes from "prop-types";
+import Button from "./button";
+
 function LinkButton(_ref) {
   var props = _extends({}, _ref);
 
-  return _react["default"].createElement(_button["default"], _extends({
+  return React.createElement(Button, _extends({
     as: "a"
@@ -34,5 +23,4 @@ }, props));
 LinkButton.propTypes = _objectSpread({
-  href: _propTypes["default"].string.isRequired
-}, _button["default"].propTypes);
-var _default = LinkButton;
-exports["default"] = _default;
+  href: PropTypes.string.isRequired
+}, Button.propTypes);
+export default LinkButton;

full-screen-dialog/full-screen-dialog.js

@@ -1,30 +0,15 @@
-"use strict";
+import React, { useRef } from "react";
+import Button from "../buttons";
+import Icon from "../icon";
+import { Dialog } from "@reach/dialog";
+import "@reach/dialog/styles.css";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _buttons = _interopRequireDefault(require("../buttons"));
-
-var _icon = _interopRequireDefault(require("../icon"));
-
-var _dialog = require("@reach/dialog");
-
-require("@reach/dialog/styles.css");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
-
 function FullScreenDialog(_ref) {
   var children = _ref.children,
       onClose = _ref.onClose;
-  return _react["default"].createElement(_dialog.Dialog, null, _react["default"].createElement("button", {
+  return React.createElement(Dialog, null, React.createElement("button", {
     ref: close,
     onClick: onClose,
     className: "text-gray-500"
-  }, _react["default"].createElement(_icon["default"], {
+  }, React.createElement(Icon, {
     icon: "times"
@@ -34,3 +19,2 @@ })), children);
 
-var _default = FullScreenDialog;
-exports["default"] = _default;
+export default FullScreenDialog;

full-screen-dialog/index.js

@@ -1,13 +0,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _fullScreenDialog = _interopRequireDefault(require("./full-screen-dialog"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var _default = _fullScreenDialog["default"];
-exports["default"] = _default;
+import FullScreenDialog from "./full-screen-dialog";
+export default FullScreenDialog;

icon/icons.js

@@ -1,8 +0,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.icons = void 0;
-var icons = [{
+export var icons = [{
   title: 'ConvertKit',
@@ -371,3 +365,2 @@ prefix: 'ck',
   iconName: 'tint'
-}];
-exports.icons = icons;
+}];

icon/index.js

@@ -1,22 +0,1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactFontawesome = require("@fortawesome/react-fontawesome");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _icons = require("./icons");
-
-require("./library");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
-
 function _extends() { _extends = Object.assign || 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); }
@@ -28,4 +7,10 @@
 
+import React, { useEffect } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import PropTypes from "prop-types";
+import { icons } from "./icons";
+import './library';
+
 var lookupIcon = function lookupIcon(icon) {
-  return _icons.icons.find(function (i) {
+  return icons.find(function (i) {
     return i.iconName === icon;
@@ -44,3 +29,3 @@ });
 
-  return _react["default"].createElement(_reactFontawesome.FontAwesomeIcon, _extends({
+  return React.createElement(FontAwesomeIcon, _extends({
     icon: icon
@@ -51,5 +36,4 @@ }, props));
 Icon.propTypes = {
-  icon: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].string])
+  icon: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
 };
-var _default = Icon;
-exports["default"] = _default;
+export default Icon;

icon/library.js

@@ -1,10 +0,5 @@
-"use strict";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCaretDown } from "@fortawesome/pro-solid-svg-icons";
+import { faAlarmClock, faAlignLeft, faAnalytics, faAngleDown, faAngleLeft, faAngleRight, faAngleUp, faArchive, faBan, faBell, faBolt, faBox, faBrowser, faBullseyeArrow, faCabinetFiling, faCalendarAlt, faCalendarTimes, faChartBar, faCheck, faCheckCircle, faClock, faCloudUpload, faCode, faCog, faCogs, faCopy, faCreditCard, faDownload, faEllipsisHAlt, faEnvelope, faEnvelopeOpen, faEnvelopeOpenText, faExternalLink, faEye, faFolder, faFolderOpen, faFileAlt, faFileCode, faFileDownload, faFileImport, faFileUpload, faFilter, faGift, faGlobe, faGripHorizontal, faHandPointer, faImage, faInboxOut, faInfoCircle, faLink, faMagic, faMailBulk, faMapMarkerAlt, faMapSigns, faMinus, faMinusCircle, faPencil, faPlus, faPlusCircle, faPuzzlePiece, faRandom, faRepeat, faRssSquare, faSearch, faShareSquare, faSignOut, faSync, faTag, faTags, faThList, faTimes, faTint, faTrashAlt, faUser, faUserChart, faUserCheck, faUserCircle, faUsersClass, faUserMinus, faUserPlus, faUsers, faUserShield, faUserTag } from "@fortawesome/pro-light-svg-icons"; // Custom icons
 
-var _fontawesomeSvgCore = require("@fortawesome/fontawesome-svg-core");
-
-var _proSolidSvgIcons = require("@fortawesome/pro-solid-svg-icons");
-
-var _proLightSvgIcons = require("@fortawesome/pro-light-svg-icons");
-
-// Custom icons
 var ckLogo = {
@@ -46,9 +41,6 @@ icon: [172, 160, [], "", "M82.7202,126.3156 C112.4896,126.3156 135.4996,103.6942 135.4996,75.7896 C135.4996,49.647 113.883,33.6844 99.5646,33.6844 C79.6196,33.6844 63.6344,47.7676 61.367,68.6716 C60.9486,72.5282 57.891,75.7612 54.012,75.7332 C47.5888,75.687 38.266,75.6322 32.3544,75.6524 C29.7986,75.6612 27.6854,73.588 27.8108,71.0354 C28.7012,52.9116 34.7246,35.9654 46.2132,22.9482 C58.9756,8.48772 77.5612,0 99.5646,0 C136.5338,0 171.4346,33.7862 171.4346,75.7896 C171.4346,122.2978 133.1226,160 83.507,160 C48.1228,160 12.48562,136.7416 0.0433638,104.2252 C-0.00279426,104.1048 -0.01025414,103.9788 0.01224206,103.8482 C0.177758,102.886 0.506808,102.007 0.830848,101.1412 C1.301986,99.8832 1.762516,98.6532 1.69526,97.2354 L1.480206,92.706 C1.374252,90.4716 2.62938,88.3938 4.65962,87.4432 L6.45828,86.601 C8.50916,85.6408 9.96698,83.7496 10.37052,81.5262 C10.97336,78.2046 13.8727,75.7896 17.2568,75.7896 C22.5392,75.7896 27.132,79.305 28.8464,84.3016 C37.1538,108.5144 50.3582,126.3156 82.7202,126.3156 Z"],
 };
+library.add(faAlarmClock, faAlignLeft, faAnalytics, faAngleDown, faAngleLeft, faAngleRight, faAngleUp, faArchive, faBan, faBell, faBolt, faBox, faBrowser, faBullseyeArrow, faCabinetFiling, faCalendarAlt, faCalendarTimes, faChartBar, faCheck, faCheckCircle, faClock, faCloudUpload, faCode, faCog, faCogs, faCopy, faCreditCard, faDownload, faEllipsisHAlt, faEnvelope, faEnvelopeOpen, faEnvelopeOpenText, faExternalLink, faEye, faFolder, faFolderOpen, faFileAlt, faFileCode, faFileDownload, faFileImport, faFileUpload, faFilter, faGift, faGlobe, faGripHorizontal, faHandPointer, faImage, faInboxOut, faInfoCircle, faLink, faMagic, faMailBulk, faMapMarkerAlt, faMapSigns, faMinus, faMinusCircle, faPencil, faPlus, faPlusCircle, faPuzzlePiece, faRandom, faRepeat, faRssSquare, faSearch, faShareSquare, faSignOut, faSync, faTag, faTags, faThList, faTimes, faTint, faTrashAlt, faUser, faUserChart, faUserCheck, faUserCircle, faUsersClass, faUserMinus, faUserPlus, faUsers, faUserShield, faUserTag); // Fontawesome solid icons
 
-_fontawesomeSvgCore.library.add(_proLightSvgIcons.faAlarmClock, _proLightSvgIcons.faAlignLeft, _proLightSvgIcons.faAnalytics, _proLightSvgIcons.faAngleDown, _proLightSvgIcons.faAngleLeft, _proLightSvgIcons.faAngleRight, _proLightSvgIcons.faAngleUp, _proLightSvgIcons.faArchive, _proLightSvgIcons.faBan, _proLightSvgIcons.faBell, _proLightSvgIcons.faBolt, _proLightSvgIcons.faBox, _proLightSvgIcons.faBrowser, _proLightSvgIcons.faBullseyeArrow, _proLightSvgIcons.faCabinetFiling, _proLightSvgIcons.faCalendarAlt, _proLightSvgIcons.faCalendarTimes, _proLightSvgIcons.faChartBar, _proLightSvgIcons.faCheck, _proLightSvgIcons.faCheckCircle, _proLightSvgIcons.faClock, _proLightSvgIcons.faCloudUpload, _proLightSvgIcons.faCode, _proLightSvgIcons.faCog, _proLightSvgIcons.faCogs, _proLightSvgIcons.faCopy, _proLightSvgIcons.faCreditCard, _proLightSvgIcons.faDownload, _proLightSvgIcons.faEllipsisHAlt, _proLightSvgIcons.faEnvelope, _proLightSvgIcons.faEnvelopeOpen, _proLightSvgIcons.faEnvelopeOpenText, _proLightSvgIcons.faExternalLink, _proLightSvgIcons.faEye, _proLightSvgIcons.faFolder, _proLightSvgIcons.faFolderOpen, _proLightSvgIcons.faFileAlt, _proLightSvgIcons.faFileCode, _proLightSvgIcons.faFileDownload, _proLightSvgIcons.faFileImport, _proLightSvgIcons.faFileUpload, _proLightSvgIcons.faFilter, _proLightSvgIcons.faGift, _proLightSvgIcons.faGlobe, _proLightSvgIcons.faGripHorizontal, _proLightSvgIcons.faHandPointer, _proLightSvgIcons.faImage, _proLightSvgIcons.faInboxOut, _proLightSvgIcons.faInfoCircle, _proLightSvgIcons.faLink, _proLightSvgIcons.faMagic, _proLightSvgIcons.faMailBulk, _proLightSvgIcons.faMapMarkerAlt, _proLightSvgIcons.faMapSigns, _proLightSvgIcons.faMinus, _proLightSvgIcons.faMinusCircle, _proLightSvgIcons.faPencil, _proLightSvgIcons.faPlus, _proLightSvgIcons.faPlusCircle, _proLightSvgIcons.faPuzzlePiece, _proLightSvgIcons.faRandom, _proLightSvgIcons.faRepeat, _proLightSvgIcons.faRssSquare, _proLightSvgIcons.faSearch, _proLightSvgIcons.faShareSquare, _proLightSvgIcons.faSignOut, _proLightSvgIcons.faSync, _proLightSvgIcons.faTag, _proLightSvgIcons.faTags, _proLightSvgIcons.faThList, _proLightSvgIcons.faTimes, _proLightSvgIcons.faTint, _proLightSvgIcons.faTrashAlt, _proLightSvgIcons.faUser, _proLightSvgIcons.faUserChart, _proLightSvgIcons.faUserCheck, _proLightSvgIcons.faUserCircle, _proLightSvgIcons.faUsersClass, _proLightSvgIcons.faUserMinus, _proLightSvgIcons.faUserPlus, _proLightSvgIcons.faUsers, _proLightSvgIcons.faUserShield, _proLightSvgIcons.faUserTag); // Fontawesome solid icons
+library.add(faCaretDown); // Custom icons
 
-
-_fontawesomeSvgCore.library.add(_proSolidSvgIcons.faCaretDown); // Custom icons
-
-
-_fontawesomeSvgCore.library.add(ckLogo, ckCalendarDropdown, ckPriceTag, ckTagPlus, ckTagMinus, ckForm, ckCustomInput);
+library.add(ckLogo, ckCalendarDropdown, ckPriceTag, ckTagPlus, ckTagMinus, ckForm, ckCustomInput);

package.json

 {
   "name": "@convertkit/design",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Design System for ConvertKit",
@@ -19,2 +19,4 @@ "main": "index.js",
   "dependencies": {
+    "@reach/alert-dialog": "^0.2.9",
+    "@reach/dialog": "^0.2.9",
     "classnames": "^2.2.6",
@@ -33,9 +35,10 @@ "prop-types": "^15.7.2"
     "@fortawesome/react-fontawesome": "^0.1.4",
-    "@storybook/addon-a11y": "^5.1.9",
-    "@storybook/addon-actions": "^5.1.9",
-    "@storybook/addon-links": "^5.1.9",
-    "@storybook/addon-notes": "^5.1.9",
-    "@storybook/addon-viewport": "^5.1.9",
-    "@storybook/addons": "^5.1.9",
-    "@storybook/react": "^5.1.9",
+    "@storybook/addon-a11y": "^5.2.0-beta.25",
+    "@storybook/addon-actions": "^5.2.0-beta.25",
+    "@storybook/addon-docs": "^5.2.0-beta.25",
+    "@storybook/addon-links": "^5.2.0-beta.25",
+    "@storybook/addon-notes": "^5.2.0-beta.25",
+    "@storybook/addon-viewport": "^5.2.0-beta.25",
+    "@storybook/addons": "^5.2.0-beta.25",
+    "@storybook/react": "^5.2.0-beta.25",
     "@testing-library/jest-dom": "^4.0.0",
@@ -53,8 +56,11 @@ "@testing-library/react": "^8.0.6",
     "/buttons/link-button.js": "/buttons/link-button.js",
+    "/confirm-dialog/confirm-dialog.js": "/confirm-dialog/confirm-dialog.js",
+    "/confirm-dialog/index.js": "/confirm-dialog/index.js",
+    "/full-screen-dialog/full-screen-dialog.js": "/full-screen-dialog/full-screen-dialog.js",
     "/full-screen-dialog/index.js": "/full-screen-dialog/index.js",
-    "/full-screen-dialog/full-screen-dialog.js": "/full-screen-dialog/full-screen-dialog.js",
+    "/utils/partition.js": "/utils/partition.js",
+    "/icon/icons.js": "/icon/icons.js",
     "/icon/index.js": "/icon/index.js",
-    "/icon/icons.js": "/icon/icons.js",
     "/icon/library.js": "/icon/library.js"
   }
-}
+}

No alert changes

Improved metrics

Total package byte prevSize

391577

increased by0.33%

Number of package files

14

increased by27.27%

Lines of code

20204

increased by0.1%

Worsened metrics

Dependency count

4

increased by100%

Dev dependency count

24

increased by4.35%

Dependency changes

• + Added@reach/alert-dialog@^0.2.9

• + Added@reach/dialog@^0.2.9

• + Added@babel/runtime@7.26.9(transitive)

• + Added@reach/alert-dialog@0.2.9(transitive)

• + Added@reach/auto-id@0.2.0(transitive)

• + Added@reach/component-component@0.1.3(transitive)

• + Added@reach/dialog@0.2.9(transitive)

• + Added@reach/portal@0.2.1(transitive)

• + Added@reach/utils@0.2.3(transitive)

• + Addedfocus-lock@0.6.8(transitive)

• + Addedinvariant@2.2.4(transitive)

• + Addedreact@16.14.0(transitive)

• + Addedreact-clientside-effect@1.2.7(transitive)

• + Addedreact-dom@16.14.0(transitive)

• + Addedreact-focus-lock@1.19.1(transitive)

• + Addedreact-remove-scroll@1.0.8(transitive)

• + Addedreact-remove-scroll-bar@1.2.0(transitive)

• + Addedreact-style-singleton@1.1.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedscheduler@0.19.1(transitive)

• + Addedtslib@1.14.1(transitive)