wip: number-input

packages/constants/component/name.ts

@@ -68,6 +68,7 @@ export const ComponentName = {
   ChatCard: "WizChatCard",
   ChatForm: "WizChatForm",
   ChatItem: "WizChatItem",
+  NumberInput: "WizNumberInput",
   Notification: "WizNotification",
   NotificationList: "WizNotificationList",
   NotificationPanel: "WizNotificationPanel",

packages/styles/bases/number-input.css.ts

@@ -0,0 +1,69 @@
+import { style } from "@vanilla-extract/css";
+import { THEME } from "@wizleap-inc/wiz-ui-constants";
+
+const BORDER_WIDTH = "1px";
+
+export const datePickerStyle = style({
+  width: "100%",
+  borderRadius: THEME.spacing.xs2,
+  boxSizing: "border-box",
+  padding: `calc(${THEME.spacing.xs} - ${BORDER_WIDTH}) ${THEME.spacing.xs}`,
+  fontSize: THEME.fontSize.sm,
+  lineHeight: THEME.fontSize.xl3,
+});
+
+export const InputStyle = style({
+  "::-webkit-outer-spin-button": {
+    appearance: "none",
+    margin: 0,
+  },
+  "::-webkit-inner-spin-button": {
+    appearance: "none",
+    margin: 0,
+  },
+  MozAppearance: "textfield",
+  minWidth: "30%",
+  border: "none",
+  outline: "none",
+  padding: `${THEME.spacing.xs2} ${THEME.spacing.no}`,
+  lineHeight: THEME.fontSize.xl,
+  flexGrow: 1,
+  fontSize: THEME.fontSize.sm,
+  color: THEME.color.gray["800"],
+  "::placeholder": {
+    color: THEME.color.gray["500"],
+    userSelect: "none",
+  },
+  ":disabled": {
+    cursor: "not-allowed",
+    backgroundColor: THEME.color.gray["300"],
+  },
+});
+
+export const ButtonStyle = style({
+  lineHeight: 0.2,
+  position: "relative",
+  cursor: "pointer",
+  padding: THEME.spacing.no,
+  borderRadius: THEME.spacing.xs2,
+  border: "none",
+  background: "transparent",
+  fill: THEME.color.gray["800"],
+  "@media": {
+    "(any-hover: hover)": {
+      ":hover": {
+        backgroundColor: THEME.color.green["300"],
+        fill: THEME.color.green["800"],
+      },
+    },
+  },
+  ":active": {
+    backgroundColor: THEME.color.green["800"],
+    fill: THEME.color.white["800"],
+  },
+});
+
+export const ArrowIconStyle = style({
+  transform: "scale(2)",
+  pointerEvents: "none",
+});

packages/wiz-ui-react/src/components/base/inputs/number-input/components/index.ts

@@ -0,0 +1 @@
+export { WizNumberInput } from "./number-input";

packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx

@@ -0,0 +1,92 @@
+import { ARIA_LABELS, ComponentName } from "@wizleap-inc/wiz-ui-constants";
+import * as styles from "@wizleap-inc/wiz-ui-styles/bases/number-input.css";
+import {
+  fillStyle,
+  fontSizeStyle,
+  inputBorderStyle,
+} from "@wizleap-inc/wiz-ui-styles/commons";
+import clsx from "clsx";
+import { ChangeEvent, useRef } from "react";
+
+import { WizIArrowDropDown, WizIArrowDropUp, WizVStack } from "@/components";
+import { BaseProps } from "@/types";
+
+type Props = BaseProps & {
+  value: number;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  width?: string;
+  error?: boolean;
+  min?: number;
+  max?: number;
+  step?: number;
+  precision?: number;
+};
+
+const NumberInput = (props: Props) => {
+  const { value, onChange, ...rest } = props;
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleStepUp = () => inputRef.current?.stepUp();
+  const handleStepDown = () => inputRef.current?.stepDown();
+
+  return (
+    <div
+      className={clsx(inputBorderStyle["default"])}
+      style={{ display: "flex", alignItems: "center", borderColor: "black" }}
+    >
+      <input
+        className={clsx(styles.InputStyle)}
+        type="number"
+        value={value}
+        ref={inputRef}
+        onChange={onChange}
+        style={{
+          width: "50px",
+          textAlign: "center",
+          margin: "0 10px",
+          padding: "5px",
+        }}
+        {...rest}
+      />
+
+      <WizVStack>
+        <button
+          type="button"
+          onClick={handleStepUp}
+          className={styles.ButtonStyle}
+          aria-label={ARIA_LABELS.YEAR_SELECTOR_NEXT}
+        >
+          <WizIArrowDropUp
+            className={clsx(
+              fillStyle["gray.800"],
+              fontSizeStyle["xs2"],
+              styles.ArrowIconStyle
+            )}
+          />
+        </button>
+        <button
+          type="button"
+          onClick={handleStepDown}
+          className={styles.ButtonStyle}
+          aria-label={ARIA_LABELS.YEAR_SELECTOR_PREV}
+        >
+          <WizIArrowDropDown
+            className={clsx(
+              fillStyle["gray.800"],
+              fontSizeStyle["xs2"],
+              styles.ArrowIconStyle
+            )}
+          />
+        </button>
+      </WizVStack>
+    </div>
+  );
+};
+
+export default NumberInput;
+
+NumberInput.displayName = ComponentName.NumberInput;
+
+export const WizNumberInput = NumberInput;

packages/wiz-ui-react/src/components/base/inputs/number-input/index.ts

@@ -0,0 +1 @@
+export * from "./components";

packages/wiz-ui-react/src/components/base/inputs/number-input/stories/number-input.stories.tsx

@@ -0,0 +1,34 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within } from "@storybook/testing-library";
+
+import { WizNumberInput } from "..";
+
+const meta: Meta<typeof WizNumberInput> = {
+  title: "Base/Input/NumberInput",
+  component: WizNumberInput,
+};
+
+export default meta;
+type Story = StoryObj<typeof WizNumberInput>;
+
+const Template: Story = {
+  render: (args) => {
+    return (
+      <div>
+        <WizNumberInput {...args} />
+      </div>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textbox = canvas.getByRole("textbox");
+    userEvent.click(textbox);
+    textbox.blur();
+  },
+};
+
+export const Default: Story = {
+  ...Template,
+  args: {},
+};