@botco/library - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

dist/index.d.ts

@@ -1,2 +0,1 @@
-import Button from './components/Button';
-export { Button };
+export * from './components';

dist/index.js

 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var React = _interopDefault(require('react'));
+var React = require('react');
+var React__default = _interopDefault(React);
+var MuiAccordion = _interopDefault(require('@material-ui/core/Accordion'));
+var MuiAccordionSummary = _interopDefault(require('@material-ui/core/AccordionSummary'));
+var MuiAccordionDetails = _interopDefault(require('@material-ui/core/AccordionDetails'));
+var ExpandMoreIcon = _interopDefault(require('@material-ui/icons/ExpandMore'));
+var Box = _interopDefault(require('@material-ui/core/Box'));
+var makeStyles = _interopDefault(require('@material-ui/core/styles/makeStyles'));
+var createStyles = _interopDefault(require('@material-ui/core/styles/createStyles'));
+var Typography = _interopDefault(require('@material-ui/core/Typography'));
+var CheckIcon = _interopDefault(require('@material-ui/icons/Check'));
 var MaterialButton = _interopDefault(require('@material-ui/core/Button'));
-var createStyles = _interopDefault(require('@material-ui/core/styles/createStyles'));
-var makeStyles = _interopDefault(require('@material-ui/core/styles/makeStyles'));
+var MuiPopover = _interopDefault(require('@material-ui/core/Popover'));
+var FormControl = _interopDefault(require('@material-ui/core/FormControl'));
+var TextField = _interopDefault(require('@material-ui/core/TextField'));
 
+function Accordion(_ref) {
+  var accordionSummary = _ref.accordionSummary,
+      accordionDetails = _ref.accordionDetails,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  return React__default.createElement(MuiAccordion, {
+    disabled: disabled
+  }, React__default.createElement(MuiAccordionSummary, {
+    expandIcon: React__default.createElement(ExpandMoreIcon, null),
+    "aria-controls": 'accordion-content',
+    id: 'accordion-header'
+  }, accordionSummary), React__default.createElement(MuiAccordionDetails, null, accordionDetails));
+}
+
+function Badge(_ref) {
+  var _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$completed = _ref.completed,
+      completed = _ref$completed === void 0 ? false : _ref$completed,
+      children = _ref.children;
+  var classes = useStyles({
+    disabled: disabled,
+    completed: completed
+  });
+  return React__default.createElement(Box, {
+    className: classes.badge
+  }, children);
+}
+var useStyles = makeStyles(function (theme) {
+  return createStyles({
+    badge: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 26,
+      height: 26,
+      color: 'white',
+      fontSize: '1.2rem',
+      borderRadius: '50%',
+      backgroundColor: function backgroundColor(props) {
+        if (props.disabled) return theme.colors.disabled;
+        if (props.completed) return theme.colors.success;
+        return theme.colors.primary;
+      }
+    }
+  });
+});
+
+function BadgedTitle(_ref) {
+  var badge = _ref.badge,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$completed = _ref.completed,
+      completed = _ref$completed === void 0 ? false : _ref$completed,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? '300px' : _ref$width,
+      children = _ref.children;
+  var classes = useStyles$1({
+    disabled: disabled,
+    completed: completed
+  });
+  return React__default.createElement(Box, {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: width,
+    className: classes.container
+  }, completed ? React__default.createElement(Badge, {
+    completed: completed
+  }, React__default.createElement(CheckIcon, null)) : React__default.createElement(Badge, {
+    disabled: disabled
+  }, badge), React__default.createElement(Typography, {
+    variant: 'h6',
+    className: classes.badgedTitle
+  }, children));
+}
+var useStyles$1 = makeStyles(function (theme) {
+  return createStyles({
+    container: {
+      borderBottom: function borderBottom(props) {
+        return theme.borders.underline + " solid " + (props.disabled ? theme.colors.disabled : theme.colors.primary);
+      }
+    },
+    badgedTitle: {
+      marginTop: 2,
+      marginLeft: 3,
+      color: function color(props) {
+        return props.disabled || props.completed ? theme.colors.disabled : theme.colors.primary;
+      }
+    }
+  });
+});
+
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -92,3 +197,3 @@ if (source == null) return {};
   var hasBorder = variant === 'outlined';
-  var classes = useStyles({
+  var classes = useStyles$2({
     width: width,
@@ -99,3 +204,3 @@ height: height,
   });
-  return React.createElement(MaterialButton, Object.assign({
+  return React__default.createElement(MaterialButton, Object.assign({
     size: size,
@@ -112,3 +217,3 @@ disabled: disabled,
 }
-var useStyles = makeStyles(function (theme) {
+var useStyles$2 = makeStyles(function (theme) {
   return createStyles({
@@ -146,3 +251,200 @@ button: {
 
+function FormTitle(_ref) {
+  var children = _ref.children,
+      className = _ref.className;
+  var classes = useStyles$3();
+  return React__default.createElement(Typography, {
+    variant: 'h6',
+    className: clsx(classes.formTitle, className)
+  }, children);
+}
+var useStyles$3 = makeStyles(function (theme) {
+  return createStyles({
+    formTitle: {
+      textAlign: 'center',
+      color: theme.palette.lightBlue.main,
+      borderBottom: "3px solid " + theme.palette.lightBlue.main
+    }
+  });
+});
+
+function IconButton(_ref) {
+  var text = _ref.text,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'large' : _ref$size,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'text' : _ref$variant,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      LeftIcon = _ref.LeftIcon,
+      RightIcon = _ref.RightIcon,
+      className = _ref.className,
+      props = _objectWithoutPropertiesLoose(_ref, ["text", "size", "variant", "disabled", "LeftIcon", "RightIcon", "className"]);
+
+  return React__default.createElement(Button, Object.assign({
+    text: text,
+    size: size,
+    vriant: variant,
+    variant: 'text',
+    color: ColorOptions.LIGHT_BLUE,
+    disabled: disabled,
+    LeftIcon: LeftIcon,
+    RightIcon: RightIcon,
+    className: className
+  }, props));
+}
+
+function Label(_ref) {
+  var id = _ref.id,
+      text = _ref.text,
+      className = _ref.className;
+  var classes = useStyles$4();
+  return React__default.createElement(Typography, {
+    id: id,
+    variant: 'caption',
+    className: clsx([className, classes.label])
+  }, text);
+}
+var useStyles$4 = makeStyles(function (theme) {
+  return createStyles({
+    label: {
+      color: theme.palette.lightDarkGray.main,
+      fontSize: 12
+    }
+  });
+});
+
+function Popover(_ref) {
+  var id = _ref.id,
+      buttonContent = _ref.buttonContent,
+      children = _ref.children;
+  var classes = useStyles$5();
+
+  var _useState = React.useState(null),
+      anchorEl = _useState[0],
+      setAnchorEl = _useState[1];
+
+  var handleClick = function handleClick(event) {
+    setAnchorEl(event.currentTarget);
+  };
+
+  var handleClose = function handleClose() {
+    setAnchorEl(null);
+  };
+
+  var open = !!anchorEl;
+  return React__default.createElement(Box, null, React__default.createElement(Button, {
+    text: buttonContent,
+    color: ColorOptions.LIGHT_BLUE,
+    variant: 'text',
+    "aria-describedby": id,
+    onClick: handleClick
+  }), React__default.createElement(MuiPopover, {
+    id: id,
+    open: open,
+    anchorEl: anchorEl,
+    onClose: handleClose,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'center'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'center'
+    },
+    className: classes.popoverContainer
+  }, children));
+}
+var useStyles$5 = makeStyles(function (theme) {
+  return createStyles({
+    popoverContainer: {
+      '& .MuiPopover-paper': {
+        boxShadow: 'none',
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderRadius: 0,
+        borderColor: theme.colors.primary
+      }
+    }
+  });
+});
+
+function TextInput(_ref) {
+  var name = _ref.name,
+      label = _ref.label,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
+      _ref$multiline = _ref.multiline,
+      multiline = _ref$multiline === void 0 ? false : _ref$multiline,
+      className = _ref.className,
+      onEnter = _ref.onEnter,
+      onChange = _ref.onChange,
+      props = _objectWithoutPropertiesLoose(_ref, ["name", "label", "value", "size", "variant", "multiline", "className", "onEnter", "onChange"]);
+
+  var classes = useStyles$6();
+
+  var handleChange = function handleChange(e) {
+    var _e$target = e.target,
+        name = _e$target.name,
+        value = _e$target.value;
+    onChange === null || onChange === void 0 ? void 0 : onChange(name, value);
+  };
+
+  var onKeyDown = function onKeyDown(e) {
+    if (e.keyCode === 13 && onEnter) {
+      onEnter(name);
+      !multiline && e.preventDefault();
+    }
+  };
+
+  return React__default.createElement(FormControl, {
+    className: classes.root
+  }, label ? React__default.createElement(Label, {
+    text: label,
+    className: classes.label
+  }) : null, React__default.createElement(TextField, Object.assign({
+    id: name,
+    name: name,
+    variant: variant,
+    multiline: multiline,
+    className: clsx(className, classes.textField),
+    onKeyDown: onKeyDown,
+    onChange: handleChange
+  }, props)));
+}
+var useStyles$6 = makeStyles(function (theme) {
+  return createStyles({
+    root: {
+      width: '100%'
+    },
+    label: {
+      margin: 0
+    },
+    textField: {
+      '& .MuiOutlinedInput-root': {
+        borderRadius: 0
+      },
+      '& .MuiInputBase-input': {
+        fontSize: '1rem',
+        lineHeight: '1.125rem'
+      },
+      '& .MuiOutlinedInput-input': {
+        padding: theme.spacing(1)
+      },
+      '& .MuiOutlinedInput-multiline': {
+        padding: theme.spacing(1)
+      }
+    }
+  });
+});
+
+exports.Accordion = Accordion;
+exports.Badge = Badge;
+exports.BadgedTitle = BadgedTitle;
 exports.Button = Button;
+exports.FormTitle = FormTitle;
+exports.IconButton = IconButton;
+exports.Label = Label;
+exports.Popover = Popover;
+exports.TextInput = TextInput;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

@@ -1,6 +0,110 @@
-import React from 'react';
+import React, { useState } from 'react';
+import MuiAccordion from '@material-ui/core/Accordion';
+import MuiAccordionSummary from '@material-ui/core/AccordionSummary';
+import MuiAccordionDetails from '@material-ui/core/AccordionDetails';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import Box from '@material-ui/core/Box';
+import makeStyles from '@material-ui/core/styles/makeStyles';
+import createStyles from '@material-ui/core/styles/createStyles';
+import Typography from '@material-ui/core/Typography';
+import CheckIcon from '@material-ui/icons/Check';
 import MaterialButton from '@material-ui/core/Button';
-import createStyles from '@material-ui/core/styles/createStyles';
-import makeStyles from '@material-ui/core/styles/makeStyles';
+import MuiPopover from '@material-ui/core/Popover';
+import FormControl from '@material-ui/core/FormControl';
+import TextField from '@material-ui/core/TextField';
 
+function Accordion(_ref) {
+  var accordionSummary = _ref.accordionSummary,
+      accordionDetails = _ref.accordionDetails,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  return React.createElement(MuiAccordion, {
+    disabled: disabled
+  }, React.createElement(MuiAccordionSummary, {
+    expandIcon: React.createElement(ExpandMoreIcon, null),
+    "aria-controls": 'accordion-content',
+    id: 'accordion-header'
+  }, accordionSummary), React.createElement(MuiAccordionDetails, null, accordionDetails));
+}
+
+function Badge(_ref) {
+  var _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$completed = _ref.completed,
+      completed = _ref$completed === void 0 ? false : _ref$completed,
+      children = _ref.children;
+  var classes = useStyles({
+    disabled: disabled,
+    completed: completed
+  });
+  return React.createElement(Box, {
+    className: classes.badge
+  }, children);
+}
+var useStyles = makeStyles(function (theme) {
+  return createStyles({
+    badge: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 26,
+      height: 26,
+      color: 'white',
+      fontSize: '1.2rem',
+      borderRadius: '50%',
+      backgroundColor: function backgroundColor(props) {
+        if (props.disabled) return theme.colors.disabled;
+        if (props.completed) return theme.colors.success;
+        return theme.colors.primary;
+      }
+    }
+  });
+});
+
+function BadgedTitle(_ref) {
+  var badge = _ref.badge,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$completed = _ref.completed,
+      completed = _ref$completed === void 0 ? false : _ref$completed,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? '300px' : _ref$width,
+      children = _ref.children;
+  var classes = useStyles$1({
+    disabled: disabled,
+    completed: completed
+  });
+  return React.createElement(Box, {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: width,
+    className: classes.container
+  }, completed ? React.createElement(Badge, {
+    completed: completed
+  }, React.createElement(CheckIcon, null)) : React.createElement(Badge, {
+    disabled: disabled
+  }, badge), React.createElement(Typography, {
+    variant: 'h6',
+    className: classes.badgedTitle
+  }, children));
+}
+var useStyles$1 = makeStyles(function (theme) {
+  return createStyles({
+    container: {
+      borderBottom: function borderBottom(props) {
+        return theme.borders.underline + " solid " + (props.disabled ? theme.colors.disabled : theme.colors.primary);
+      }
+    },
+    badgedTitle: {
+      marginTop: 2,
+      marginLeft: 3,
+      color: function color(props) {
+        return props.disabled || props.completed ? theme.colors.disabled : theme.colors.primary;
+      }
+    }
+  });
+});
+
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -90,3 +194,3 @@ if (source == null) return {};
   var hasBorder = variant === 'outlined';
-  var classes = useStyles({
+  var classes = useStyles$2({
     width: width,
@@ -109,3 +213,3 @@ height: height,
 }
-var useStyles = makeStyles(function (theme) {
+var useStyles$2 = makeStyles(function (theme) {
   return createStyles({
@@ -143,3 +247,192 @@ button: {
 
-export { Button };
+function FormTitle(_ref) {
+  var children = _ref.children,
+      className = _ref.className;
+  var classes = useStyles$3();
+  return React.createElement(Typography, {
+    variant: 'h6',
+    className: clsx(classes.formTitle, className)
+  }, children);
+}
+var useStyles$3 = makeStyles(function (theme) {
+  return createStyles({
+    formTitle: {
+      textAlign: 'center',
+      color: theme.palette.lightBlue.main,
+      borderBottom: "3px solid " + theme.palette.lightBlue.main
+    }
+  });
+});
+
+function IconButton(_ref) {
+  var text = _ref.text,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'large' : _ref$size,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'text' : _ref$variant,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      LeftIcon = _ref.LeftIcon,
+      RightIcon = _ref.RightIcon,
+      className = _ref.className,
+      props = _objectWithoutPropertiesLoose(_ref, ["text", "size", "variant", "disabled", "LeftIcon", "RightIcon", "className"]);
+
+  return React.createElement(Button, Object.assign({
+    text: text,
+    size: size,
+    vriant: variant,
+    variant: 'text',
+    color: ColorOptions.LIGHT_BLUE,
+    disabled: disabled,
+    LeftIcon: LeftIcon,
+    RightIcon: RightIcon,
+    className: className
+  }, props));
+}
+
+function Label(_ref) {
+  var id = _ref.id,
+      text = _ref.text,
+      className = _ref.className;
+  var classes = useStyles$4();
+  return React.createElement(Typography, {
+    id: id,
+    variant: 'caption',
+    className: clsx([className, classes.label])
+  }, text);
+}
+var useStyles$4 = makeStyles(function (theme) {
+  return createStyles({
+    label: {
+      color: theme.palette.lightDarkGray.main,
+      fontSize: 12
+    }
+  });
+});
+
+function Popover(_ref) {
+  var id = _ref.id,
+      buttonContent = _ref.buttonContent,
+      children = _ref.children;
+  var classes = useStyles$5();
+
+  var _useState = useState(null),
+      anchorEl = _useState[0],
+      setAnchorEl = _useState[1];
+
+  var handleClick = function handleClick(event) {
+    setAnchorEl(event.currentTarget);
+  };
+
+  var handleClose = function handleClose() {
+    setAnchorEl(null);
+  };
+
+  var open = !!anchorEl;
+  return React.createElement(Box, null, React.createElement(Button, {
+    text: buttonContent,
+    color: ColorOptions.LIGHT_BLUE,
+    variant: 'text',
+    "aria-describedby": id,
+    onClick: handleClick
+  }), React.createElement(MuiPopover, {
+    id: id,
+    open: open,
+    anchorEl: anchorEl,
+    onClose: handleClose,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'center'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'center'
+    },
+    className: classes.popoverContainer
+  }, children));
+}
+var useStyles$5 = makeStyles(function (theme) {
+  return createStyles({
+    popoverContainer: {
+      '& .MuiPopover-paper': {
+        boxShadow: 'none',
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderRadius: 0,
+        borderColor: theme.colors.primary
+      }
+    }
+  });
+});
+
+function TextInput(_ref) {
+  var name = _ref.name,
+      label = _ref.label,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
+      _ref$multiline = _ref.multiline,
+      multiline = _ref$multiline === void 0 ? false : _ref$multiline,
+      className = _ref.className,
+      onEnter = _ref.onEnter,
+      onChange = _ref.onChange,
+      props = _objectWithoutPropertiesLoose(_ref, ["name", "label", "value", "size", "variant", "multiline", "className", "onEnter", "onChange"]);
+
+  var classes = useStyles$6();
+
+  var handleChange = function handleChange(e) {
+    var _e$target = e.target,
+        name = _e$target.name,
+        value = _e$target.value;
+    onChange === null || onChange === void 0 ? void 0 : onChange(name, value);
+  };
+
+  var onKeyDown = function onKeyDown(e) {
+    if (e.keyCode === 13 && onEnter) {
+      onEnter(name);
+      !multiline && e.preventDefault();
+    }
+  };
+
+  return React.createElement(FormControl, {
+    className: classes.root
+  }, label ? React.createElement(Label, {
+    text: label,
+    className: classes.label
+  }) : null, React.createElement(TextField, Object.assign({
+    id: name,
+    name: name,
+    variant: variant,
+    multiline: multiline,
+    className: clsx(className, classes.textField),
+    onKeyDown: onKeyDown,
+    onChange: handleChange
+  }, props)));
+}
+var useStyles$6 = makeStyles(function (theme) {
+  return createStyles({
+    root: {
+      width: '100%'
+    },
+    label: {
+      margin: 0
+    },
+    textField: {
+      '& .MuiOutlinedInput-root': {
+        borderRadius: 0
+      },
+      '& .MuiInputBase-input': {
+        fontSize: '1rem',
+        lineHeight: '1.125rem'
+      },
+      '& .MuiOutlinedInput-input': {
+        padding: theme.spacing(1)
+      },
+      '& .MuiOutlinedInput-multiline': {
+        padding: theme.spacing(1)
+      }
+    }
+  });
+});
+
+export { Accordion, Badge, BadgedTitle, Button, FormTitle, IconButton, Label, Popover, TextInput };
 //# sourceMappingURL=index.modern.js.map

package.json

 {
   "name": "@botco/library",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Botco UI Components",
@@ -5,0 +5,0 @@ "author": "enricribas",

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

86354

173.77%

Number of package files

30

3.45%

Lines of code

981

138.69%

Number of medium supply chain risk alerts

0

-100%

No dependency changes