v1.1.2

README.md

@@ -10,6 +10,9 @@ You can setup the following environment variables to configure your Switchblade
 
 # Change Log
 
+## v1.1.2 (2024-12-24)
+- Updated dependencies
+
 ## v1.1.1 (2024-05-10)
 - Fixed an issue where pressing the escape key could take you to a different page if no modals or drawers were open
 - Updated dependencies

package.json

@@ -1,6 +1,6 @@
 {
   "name": "switchblade-ui",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "author": "Mike Beasley",
   "scripts": {
     "start": "vite",

src/components/Alert.jsx

@@ -2,7 +2,23 @@ import { classNames } from 'lib/util';
 import animations from 'styles/animations.module.css';
 import styles from 'styles/Alert.module.css';
 
-const Alert = ({ title, content, color, animated, centered, animation, ...props }) => (
+const Colors = {
+  White: "white",
+  Blue: "blue",
+  Red: "red",
+  Yellow: "yellow",
+  Green: "green"
+}
+
+const Alert = ({
+  title,
+  content,
+  color = Colors.Blue,
+  animated = true,
+  centered,
+  animation = animations.pullIn,
+  ...props
+}) => (
   <div
     className={classNames([
       styles.alert,
@@ -17,18 +33,6 @@ const Alert = ({ title, content, color, animated, centered, animation, ...props
   </div>
 )
 
-Alert.Colors = {
-  White: "white",
-  Blue: "blue",
-  Red: "red",
-  Yellow: "yellow",
-  Green: "green"
-}
-
-Alert.defaultProps = {
-  color: Alert.Colors.Blue,
-  animated: true,
-  animation: animations.pullIn
-}
+Alert.Colors = Colors;
 
 export default Alert;

src/components/Button.jsx

@@ -1,7 +1,27 @@
 import { classNames } from 'lib/util';
 import styles from 'styles/Button.module.css';
 
-const Button = ({ children, size, block, color, ghost, inputButton, ...props }) => (
+const Colors = {
+  White: styles.white,
+  Blue: styles.blue,
+  Red: styles.red,
+  Green: styles.green
+}
+
+const Sizes = {
+  Default: styles.default,
+  Large: styles.large
+}
+
+const Button = ({
+  children,
+  size = Sizes.Default,
+  block,
+  color = Colors.Blue,
+  ghost,
+  inputButton,
+  ...props
+}) => (
   <button
     className={classNames([
       styles.button,
@@ -17,21 +37,7 @@ const Button = ({ children, size, block, color, ghost, inputButton, ...props })
   </button>
 )
 
-Button.Colors = {
-  White: styles.white,
-  Blue: styles.blue,
-  Red: styles.red,
-  Green: styles.green
-}
-
-Button.Sizes = {
-  Default: styles.default,
-  Large: styles.large
-}
-
-Button.defaultProps = {
-  color: Button.Colors.Blue,
-  size: Button.Sizes.Default
-}
+Button.Colors = Colors;
+Button.Sizes = Sizes;
 
 export default Button;

src/components/Collapse.jsx

@@ -5,7 +5,7 @@ import Icon from 'components/Icon';
 
 import styles from 'styles/Collapse.module.css';
 
-const Collapse = ({ title, defaultOpen, children }) => {
+const Collapse = ({ title, defaultOpen = false, children }) => {
   const [open, setOpen] = useState(defaultOpen);
 
   return (
@@ -23,8 +23,4 @@ const Collapse = ({ title, defaultOpen, children }) => {
   )
 }
 
-Collapse.defaultProps = {
-  defaultOpen: false
-}
-
 export default Collapse;

src/components/Divider.jsx

@@ -1,4 +1,4 @@
-const Divider = ({ style, size }) => (
+const Divider = ({ style, size = 20 }) => (
   <hr style={{
     width: '100%',
     border: 'none',
@@ -9,8 +9,4 @@ const Divider = ({ style, size }) => (
   />
 )
 
-Divider.defaultProps = {
-  size: 20
-}
-
 export default Divider;

src/components/Drawer.jsx

@@ -13,7 +13,19 @@ const Positions = {
   Right: "right"
 }
 
-const Drawer = ({ open, header, children, footer, hide, canClose, showCloseButton, rounded, width, height, position }) => {
+const Drawer = ({
+  open,
+  header,
+  children,
+  footer,
+  hide,
+  canClose = true,
+  showCloseButton = true,
+  rounded = !isMobile,
+  width = 600,
+  height = '100%',
+  position = Positions.Right
+}) => {
   const ESC = "Escape";
 
   const drawerHandleKey = useMemo(() => (e) => { if (e.code === ESC && canClose) hide() }, []);
@@ -87,13 +99,4 @@ const Drawer = ({ open, header, children, footer, hide, canClose, showCloseButto
 
 Drawer.Positions = Positions;
 
-Drawer.defaultProps = {
-  canClose: true,
-  rounded: !isMobile,
-  width: 600,
-  height: '100%',
-  showCloseButton: true,
-  position: Positions.Right
-}
-
 export default Drawer;

src/components/Grid.jsx

@@ -1,6 +1,6 @@
 import styles from 'styles/Grid.module.css';
 
-const Grid = ({ children, itemWidth }) => (
+const Grid = ({ children, itemWidth = '350px' }) => (
   <div
     className={styles.grid}
     style={{
@@ -11,8 +11,4 @@ const Grid = ({ children, itemWidth }) => (
   </div>
 )
 
-Grid.defaultProps = {
-  itemWidth: '350px'
-}
-
 export default Grid;

src/components/Icon.jsx

@@ -1,4 +1,4 @@
-const Icon = ({ icon, size, maxSize, color, style, onClick, ...props }) => icon({
+const Icon = ({ icon, size = 48, maxSize, color, style, onClick, ...props }) => icon({
   style: {
     display: 'flex',
     alignItems: 'center',
@@ -15,8 +15,4 @@ const Icon = ({ icon, size, maxSize, color, style, onClick, ...props }) => icon(
   ...props
 })
 
-Icon.defaultProps = {
-  size: 48
-}
-
 export default Icon;

src/components/Input.jsx

@@ -2,7 +2,12 @@ import Button from 'components/Button';
 import { classNames } from 'lib/util';
 import styles from 'styles/Input.module.css';
 
-const Text = ({ size, block, onChange, value, button, disabled, viewOnly, ...props }) => (
+const Sizes = {
+  Default: styles.default,
+  Large: styles.large
+}
+
+const Text = ({ size = Sizes.Default, block, onChange, value, button, disabled, viewOnly, ...props }) => (
   <>
     <input
       disabled={disabled || viewOnly}
@@ -28,7 +33,7 @@ const Text = ({ size, block, onChange, value, button, disabled, viewOnly, ...pro
   </>
 )
 
-const TextArea = ({ size, block, onChange, value, disabled, viewOnly, ...props }) => (
+const TextArea = ({ size = Sizes.Default, block, onChange, value, disabled, viewOnly, ...props }) => (
   <textarea
     rows={5}
     disabled={disabled || viewOnly}
@@ -50,18 +55,9 @@ const Modes = {
   TextArea
 }
 
-const Input = ({ mode, ...props }) => mode(props);
-
-Input.Sizes = {
-  Default: styles.default,
-  Large: styles.large
-}
+const Input = ({ mode = Modes.Text, ...props }) => mode(props);
 
+Input.Sizes = Sizes;
 Input.Modes = Modes;
 
-Input.defaultProps = {
-  size: Input.Sizes.Default,
-  mode: Input.Modes.Text
-}
-
 export default Input;

src/components/LabeledInput.jsx

@@ -1,7 +1,7 @@
 import Stack from 'components/Stack';
 import { isMobile } from 'lib/config';
 
-const LabeledInput = ({ label, children, block, style }) => (
+const LabeledInput = ({ label, children, block, style = {} }) => (
   <Stack
     gap={5}
     style={{
@@ -16,8 +16,4 @@ const LabeledInput = ({ label, children, block, style }) => (
   </Stack>
 )
 
-LabeledInput.defaultProps = {
-  style: {}
-}
-
 export default LabeledInput;

src/components/Loader.jsx

@@ -1,7 +1,7 @@
 import LoaderIcon from 'icons/loader.svg?react';
 import styles from 'styles/Loader.module.css';
 
-const Loader = ({ size, maxSize, animation }) => {
+const Loader = ({ size = 48, maxSize, animation }) => {
   return (
     <span
       className={animation}
@@ -26,8 +26,4 @@ const Loader = ({ size, maxSize, animation }) => {
   )
 }
 
-Loader.defaultProps = {
-  size: 48
-}
-
 export default Loader;

src/components/Modal.jsx

@@ -5,7 +5,7 @@ import Icon from 'components/Icon';
 import CloseIcon from 'icons/close.svg?react';
 import styles from 'styles/Modal.module.css';
 
-const Modal = ({ open, header, footer, hide, canClose, showCloseButton, children }) => {
+const Modal = ({ open, header, footer, hide, canClose = true, showCloseButton, children }) => {
   const ESC = "Escape";
 
   const modalHandleKey = useMemo(() => (e) => { if (e.code === ESC && canClose) hide() }, []);
@@ -79,8 +79,4 @@ const Modal = ({ open, header, footer, hide, canClose, showCloseButton, children
   )
 }
 
-Modal.defaultProps = {
-  canClose: true
-}
-
 export default Modal;

src/components/Select.jsx

@@ -1,7 +1,22 @@
 import { classNames } from 'lib/util';
 import styles from 'styles/Select.module.css';
 
-const Select = ({ onChange, size, block, returnObject, options, value, viewOnly, disabled, ...props }) => (
+const Sizes = {
+  Default: styles.default,
+  Large: styles.large
+}
+
+const Select = ({
+  onChange,
+  size = Sizes.Default,
+  block,
+  returnObject,
+  options = [],
+  value,
+  viewOnly,
+  disabled,
+  ...props
+}) => (
   <select
     disabled={disabled || viewOnly}
     value={returnObject ? JSON.stringify(value) : value}
@@ -17,14 +32,6 @@ const Select = ({ onChange, size, block, returnObject, options, value, viewOnly,
   </select>
 )
 
-Select.Sizes = {
-  Default: styles.default,
-  Large: styles.large
-}
-
-Select.defaultProps = {
-  options: [],
-  size: Select.Sizes.Default
-}
+Select.Sizes = Sizes;
 
 export default Select;

src/components/Stack.jsx

@@ -6,7 +6,7 @@ const Directions = {
   Horizontal: "horizontal"
 }
 
-const Stack = ({ horizontal, gap, block, children, center, style, className, ...props }) => (
+const Stack = ({ horizontal, gap = 10, block, children, center, style, className, ...props }) => (
   <div
     className={classNames([
       styles.stack,
@@ -24,8 +24,4 @@ const Stack = ({ horizontal, gap, block, children, center, style, className, ...
 
 Stack.Directions = Directions;
 
-Stack.defaultProps = {
-  gap: 10
-}
-
 export default Stack;