@planningcenter/doxy-web - npm Package Compare versions

Comparing version 2.1.2 to 2.2.0-rc.0

dist/index.d.ts

@@ -9,2 +9,3 @@ import "./scss/doxy-web.scss";
 export * from "./components/Image/";
+export * from "./components/NumberSpinner";
 export * from "./components/Select/";
@@ -11,0 +12,0 @@ export * from "./components/Subheading/";

dist/index.es.js

@@ -1,2 +0,2 @@
-import React, { forwardRef } from 'react';
+import React, { useState, forwardRef } from 'react';
 import classnames from 'classnames';
@@ -281,2 +281,68 @@
 
+const NumberSpinner = _ref => {
+  let {
+    disabled = false,
+    initialValue = 0,
+    min = 0,
+    max = 100,
+    name = "numberSpinner",
+    onChange = undefined,
+    size = "md",
+    step = 1
+  } = _ref;
+  const [value, setValue] = useState(initialValue || min);
+  const [focus, setFocus] = useState(false);
+  const handleKeyDown = e => {
+    if (e.code === "ArrowUp" || e.code === "ArrowRight") handleIncrement();
+    if (e.code === "ArrowDown" || e.code === "ArrowLeft") handleDecrement();
+  };
+  const handleDecrement = () => {
+    const newValue = value === min ? value : value - step;
+    setValue(newValue);
+    if (!!onChange) onChange(newValue);
+  };
+  const handleIncrement = () => {
+    const newValue = value === max ? value : value + step;
+    setValue(newValue);
+    if (!!onChange) onChange(newValue);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "numberSpinner",
+    className: classnames("number-spinner", {
+      "sm-number-spinner": size === "sm",
+      focused: focus
+    })
+  }, /*#__PURE__*/React.createElement("button", {
+    disabled: disabled || value === min,
+    className: "number-spinner__btn number-spinner__btn-decrement",
+    "aria-label": "decrement input value",
+    onClick: handleDecrement,
+    onFocus: () => setFocus(true),
+    onBlur: () => setFocus(false),
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement("span", null, "-")), /*#__PURE__*/React.createElement("input", {
+    name: name,
+    type: "number",
+    disabled: disabled,
+    max: max.toString(),
+    min: min.toString(),
+    step: step.toString(),
+    value: value.toString(),
+    onChange: () => {},
+    onWheel: e => e.target.blur(),
+    onKeyDown: handleKeyDown,
+    onFocus: () => setFocus(true),
+    onBlur: () => setFocus(false),
+    className: "number-spinner__input"
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: disabled || value === max,
+    className: "number-spinner__btn number-spinner__btn-increment",
+    "aria-label": "increment input value",
+    onClick: handleIncrement,
+    onFocus: () => setFocus(true),
+    onBlur: () => setFocus(false),
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement("span", null, "+")));
+};
+
 const Select = _ref => {
@@ -385,3 +451,3 @@ let {
 
-export { Alert, Badge, Button, Checkbox, Grid, Heading, Image, Select, Subheading, TextInput, Textarea };
+export { Alert, Badge, Button, Checkbox, Grid, Heading, Image, NumberSpinner, Select, Subheading, TextInput, Textarea };
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -290,2 +290,68 @@ 'use strict';
 
+const NumberSpinner = _ref => {
+  let {
+    disabled = false,
+    initialValue = 0,
+    min = 0,
+    max = 100,
+    name = "numberSpinner",
+    onChange = undefined,
+    size = "md",
+    step = 1
+  } = _ref;
+  const [value, setValue] = React.useState(initialValue || min);
+  const [focus, setFocus] = React.useState(false);
+  const handleKeyDown = e => {
+    if (e.code === "ArrowUp" || e.code === "ArrowRight") handleIncrement();
+    if (e.code === "ArrowDown" || e.code === "ArrowLeft") handleDecrement();
+  };
+  const handleDecrement = () => {
+    const newValue = value === min ? value : value - step;
+    setValue(newValue);
+    if (!!onChange) onChange(newValue);
+  };
+  const handleIncrement = () => {
+    const newValue = value === max ? value : value + step;
+    setValue(newValue);
+    if (!!onChange) onChange(newValue);
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    "data-testid": "numberSpinner",
+    className: classnames__default["default"]("number-spinner", {
+      "sm-number-spinner": size === "sm",
+      focused: focus
+    })
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    disabled: disabled || value === min,
+    className: "number-spinner__btn number-spinner__btn-decrement",
+    "aria-label": "decrement input value",
+    onClick: handleDecrement,
+    onFocus: () => setFocus(true),
+    onBlur: () => setFocus(false),
+    tabIndex: -1
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, "-")), /*#__PURE__*/React__default["default"].createElement("input", {
+    name: name,
+    type: "number",
+    disabled: disabled,
+    max: max.toString(),
+    min: min.toString(),
+    step: step.toString(),
+    value: value.toString(),
+    onChange: () => {},
+    onWheel: e => e.target.blur(),
+    onKeyDown: handleKeyDown,
+    onFocus: () => setFocus(true),
+    onBlur: () => setFocus(false),
+    className: "number-spinner__input"
+  }), /*#__PURE__*/React__default["default"].createElement("button", {
+    disabled: disabled || value === max,
+    className: "number-spinner__btn number-spinner__btn-increment",
+    "aria-label": "increment input value",
+    onClick: handleIncrement,
+    onFocus: () => setFocus(true),
+    onBlur: () => setFocus(false),
+    tabIndex: -1
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, "+")));
+};
+
 const Select = _ref => {
@@ -401,2 +467,3 @@ let {
 exports.Image = Image;
+exports.NumberSpinner = NumberSpinner;
 exports.Select = Select;
@@ -403,0 +470,0 @@ exports.Subheading = Subheading;

package.json

 {
   "name": "@planningcenter/doxy-web",
-  "version": "2.1.2",
+  "version": "2.2.0-rc.0",
   "description": "Doxy for Church Center Web",
@@ -50,15 +50,15 @@ "main": "dist/index.js",
     "@rollup/plugin-typescript": "^9.0.2",
-    "@storybook/addon-actions": "^7.0.11",
-    "@storybook/addon-docs": "^7.0.11",
-    "@storybook/addon-essentials": "^7.0.11",
-    "@storybook/addon-interactions": "^7.0.11",
-    "@storybook/addon-links": "^7.0.11",
-    "@storybook/addon-mdx-gfm": "^7.0.11",
+    "@storybook/addon-actions": "^7.1.1",
+    "@storybook/addon-docs": "^7.1.1",
+    "@storybook/addon-essentials": "^7.1.1",
+    "@storybook/addon-interactions": "^7.1.1",
+    "@storybook/addon-links": "^7.1.1",
+    "@storybook/addon-mdx-gfm": "^7.1.1",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-styling": "^1.0.8",
-    "@storybook/addons": "^7.0.11",
-    "@storybook/client-api": "^7.0.11",
-    "@storybook/react": "^7.0.11",
-    "@storybook/react-webpack5": "^7.0.11",
-    "@storybook/testing-library": "^0.1.0",
+    "@storybook/addon-styling": "^1.3.4",
+    "@storybook/addons": "^7.1.1",
+    "@storybook/client-api": "^7.1.1",
+    "@storybook/react": "^7.1.1",
+    "@storybook/react-webpack5": "^7.1.1",
+    "@storybook/testing-library": "^0.2.0",
     "@testing-library/dom": "^8.19.0",
@@ -79,3 +79,3 @@ "@testing-library/jest-dom": "^5.16.5",
     "eslint-plugin-promise": "^5.0.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.6.13",
     "gh-pages": "^4.0.0",
@@ -91,3 +91,2 @@ "identity-obj-proxy": "^3.0.0",
     "react": "^18.2.0",
-    "react-colorful": "^5.6.1",
     "react-dom": "^18.2.0",
@@ -101,3 +100,3 @@ "remark-gfm": "^3.0.1",
     "sass-loader": "^13.2.2",
-    "storybook": "^7.0.11",
+    "storybook": "^7.1.1",
     "storybook-dark-mode": "^3.0.0",
@@ -104,0 +103,0 @@ "tailwindcss": "^3.2.4",

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

587126

increased by2.88%

Dev dependency count

64

decreased by-1.54%

Number of package files

40

increased by5.26%

Lines of code

11670

increased by1.54%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes