feat: query select number

.eslintrc.cjs

@@ -108,6 +108,12 @@ module.exports = {
           'WorkspaceNoResults',
           'WorkspaceSignout',
           'NavigationItem',
+          'Action',
+          'QueryItem',
+          'NumberInput',
+          'TextInput',
+          'Qualifier',
+          'ValueSelector',
         ],
       },
     ],
@@ -123,4 +129,4 @@ module.exports = {
     React: true,
     expect: true,
   },
-}
+}

CHANGELOG.md

@@ -30,6 +30,8 @@
 
 * allows UPS to receive cookie config options instead of only the key ([517d030](https://github.com/mParticle/aquarium/commit/517d03066bb1d55968d650bb7a2a6162a1567ad7))
 
+## [1.16.2-query-select-number.1](https://github.com/mParticle/aquarium/compare/v1.16.1...v1.16.2-query-select-number.1) (2024-06-08)
+
 ## [1.16.1](https://github.com/mParticle/aquarium/compare/v1.16.0...v1.16.1) (2024-06-03)
 
 
@@ -176,4 +178,4 @@
 
 ## [1.9.6-dev.1](https://github.com/mParticle/aquarium/compare/v1.9.5...v1.9.6-dev.1) (2024-03-25)
 
-## [1.8.3-dev.3](https://github.com/mParticle/aquarium/compare/v1.8.3-dev.2...v1.8.3-dev.3) (2024-03-20)
+## [1.8.3-dev.3](https://github.com/mParticle/aquarium/compare/v1.8.3-dev.2...v1.8.3-dev.3) (2024-03-20)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mparticle/aquarium",
-  "version": "1.17.0",
+  "version": "1.17.1-query-select-number.1",
   "description": "mParticle Component Library",
   "license": "Apache-2.0",
   "keywords": [
@@ -108,4 +108,4 @@
   "dependencies": {
     "lodash.clonedeep": "4.5.0"
   }
-}
+}

release.config.cjs

@@ -1,9 +1,22 @@
 module.exports = {
-  branches: ['main', {
-    name: 'feat/*',
-    channel: 'feature',
-    prerelease: "${name.split('/').slice(1).join('-').toLowerCase()}"
-  }],
+  branches: ['main', 
+    {
+      name: 'feat/*',
+      channel: 'feature',
+      prerelease: "${name.split('/').slice(1).join('-').toLowerCase()}"
+    },
+    {
+      name: 'chore/*',
+      channel: 'chore',
+      prerelease: "${name.split('/').slice(1).join('-').toLowerCase()}"
+    },
+    {
+      name: 'fix/*',
+      channel: 'fix',
+      prerelease: "${name.split('/').slice(1).join('-').toLowerCase()}"
+    },
+
+  ],
   tagFormat: 'v${version}',
   repositoryUrl: 'https://github.com/mParticle/aquarium',
   plugins: [
@@ -52,4 +65,4 @@ module.exports = {
       },
     ],
   ],
-}
+}

src/components/data-entry/QueryItem/Action.tsx

@@ -8,7 +8,7 @@ export interface IActionProps {
   onClick?: () => void
 }
 
-export const Action = (props: IActionProps) => {
+const Action = (props: IActionProps) => {
   let buttonClassNames: string = 'query-item query-item--action'
   if ((props.type ?? 'default') === 'default') buttonClassNames += ` query-item--secondary`
   if ((props.type ?? 'default') === 'disabled') buttonClassNames += ` query-item--disabled`
@@ -32,4 +32,6 @@ export const Action = (props: IActionProps) => {
       </Button>
     </>
   )
-}
+}
+
+export default Action

src/components/data-entry/QueryItem/Cascader.tsx

@@ -30,7 +30,7 @@ export interface ICascaderProps {
   value?: Array<number | string>
 }
 
-export const Cascader = (props: ICascaderProps) => {
+const Cascader = (props: ICascaderProps) => {
   type DefaultOptionType = GetProp<IBaseCascaderProps, 'options'>[number]
 
   const options: ICascaderOption[] = []
@@ -177,4 +177,6 @@ export const Cascader = (props: ICascaderProps) => {
   function getIcon() {
     return <Icon name={props.icon ?? 'empty'} size="sm" color="primary" />
   }
-}
+}
+
+export default Cascader

src/components/data-entry/QueryItem/NumberInput.stories.tsx

@@ -0,0 +1,62 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+import { QueryItem } from 'src/components'
+
+const meta: Meta<typeof QueryItem.ValueSelector.NumberInput> = {
+  title: 'Aquarium/Data Entry/QueryItem/ValueSelector/NumberInput',
+  component: QueryItem.ValueSelector.NumberInput,
+  parameters: {
+    docs: {
+      description: {
+        component: 'This is the "Number Input" component of the QueryItem/ValueSelector component group.',
+      },
+    },
+  },
+  args: {
+    onChange: (value: number) => {
+      console.log(value)
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof QueryItem.ValueSelector.NumberInput>
+
+export const Primary: Story = {}
+
+export const Default: Story = {
+  args: {
+    value: 2,
+  },
+}
+
+export const Placeholder: Story = {
+  args: {
+    placeholder: 'Enter a Number',
+  },
+}
+
+export const ErrorMessage: Story = {
+  args: {
+    errorMessage: 'Required field!',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    placeholder: 'Disabled',
+  },
+}
+
+export const Min: Story = {
+  args: {
+    min: 0,
+  },
+}
+
+export const Max: Story = {
+  args: {
+    max: 100,
+  },
+}

src/components/data-entry/QueryItem/NumberInput.tsx

@@ -0,0 +1,42 @@
+import './query-item.css'
+import { InputNumber } from 'src/components'
+import { Typography } from 'src/components/general/Typography/Typography'
+
+interface INumberInputProps {
+  value?: number
+  disabled?: boolean
+  errorMessage?: string
+  placeholder?: string
+  min?: number
+  max?: number
+  onChange?: (value: number) => void
+}
+
+const NumberInput = (props: INumberInputProps) => {
+  const isErrorStatus = props.errorMessage && !props.disabled
+
+  let inputClasses = `query-item query-item--input-number`
+  if (props.errorMessage) inputClasses += ' query-item--error'
+
+  return (
+    <>
+      <InputNumber
+        status={isErrorStatus ? 'error' : undefined}
+        disabled={props.disabled}
+        className={inputClasses}
+        value={props.value}
+        placeholder={props.placeholder}
+        max={props.max}
+        min={props.min}
+        onChange={(value: string | number | null) => {
+          props.onChange?.(parseFloat(value as string))
+        }}
+      />
+
+      {props.errorMessage &&
+       <Typography.Text type="danger">{props.errorMessage}</Typography.Text>}
+    </>
+  )
+}
+
+export default NumberInput

src/components/data-entry/QueryItem/Qualifier.tsx

@@ -15,7 +15,7 @@ export interface IQueryItemQualifierProps {
   value?: IQueryItemQualifierOption
 }
 
-export const Qualifier = (props: IQueryItemQualifierProps) => {
+const Qualifier = (props: IQueryItemQualifierProps) => {
   const [isOpen, setIsOpen] = useState(false)
   const selectProps: ISelectProps = {
     defaultValue: props.options?.length ? props.options[0].value : undefined,
@@ -45,3 +45,5 @@ export const Qualifier = (props: IQueryItemQualifierProps) => {
     </>
   )
 }
+
+export default Qualifier

src/components/data-entry/QueryItem/QueryItem.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { ValueSelector } from 'src/components/data-entry/QueryItem/ValueSelector'
-import { Action } from './Action'
-import { Qualifier } from './Qualifier'
-import { Text } from './Text'
+import ValueSelector from 'src/components/data-entry/QueryItem/ValueSelector'
+import Action from 'src/components/data-entry/QueryItem/Action'
+import Text from 'src/components/data-entry/QueryItem/Text'
+import Qualifier from 'src/components/data-entry/QueryItem/Qualifier'
 
 export const QueryItem = () => {
   return <>DO NOT USE THIS OR YOU WILL BE FIRED!</>

src/components/data-entry/QueryItem/Text.tsx

@@ -5,7 +5,7 @@ export interface ITextProps {
   text: string
 }
 
-export const Text = ({ disabled = false, text }: ITextProps) => {
+const Text = ({ disabled = false, text }: ITextProps) => {
   return (
     <Typography.Text disabled={disabled} style={{ whiteSpace: 'nowrap' }}>
       {text}

src/components/data-entry/QueryItem/TextInput.stories.tsx

@@ -22,9 +22,11 @@ export default meta
 
 type Story = StoryObj<typeof QueryItem.ValueSelector.TextInput>
 
+export const Primary: Story = {}
+
 export const Default: Story = {
   args: {
-    value: 'Primary',
+    value: 'Default',
   },
 }
 
@@ -38,4 +40,4 @@ export const ErrorMessage: Story = {
   args: {
     errorMessage: 'Required field!',
   },
-}
+}

src/components/data-entry/QueryItem/TextInput.tsx

@@ -1,22 +1,17 @@
 import './query-item.css'
-import { type ChangeEvent } from 'react'
 import { Input } from 'src/components'
 import { Typography } from 'src/components/general/Typography/Typography'
 
 interface ITextInputProps {
-  onChange?: (value: string) => void
   value?: string
   disabled?: boolean
   errorMessage?: string
   placeholder?: string
+  onChange?: (value: string) => void
 }
 
-export const TextInput = (props: ITextInputProps) => {
-  const isErrorStatus = props.errorMessage && !props.disabled
-
-  const _onChange = (e: ChangeEvent<HTMLInputElement>) => {
-    if (props.onChange) props.onChange(e.target.value)
-  }
+const TextInput = (props: ITextInputProps) => {
+  const isErrorStatus: boolean = !!props.errorMessage && !props.disabled
 
   let inputClasses = `query-item query-item--input-text`
   if (props.errorMessage) inputClasses += ' query-item--error'
@@ -29,9 +24,14 @@ export const TextInput = (props: ITextInputProps) => {
         className={inputClasses}
         value={props.value}
         placeholder={props.placeholder}
-        onChange={_onChange}
+        onChange={e => {
+          props.onChange?.(e.target.value)
+        }}
       />
+
       {props.errorMessage && <Typography.Text type="danger">{props.errorMessage}</Typography.Text>}
     </>
   )
 }
+
+export default TextInput

src/components/data-entry/QueryItem/ValueSelector.stories.tsx

@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react'
-import { ValueSelector } from './ValueSelector'
+import ValueSelector from './ValueSelector'
 
 const meta: Meta<typeof ValueSelector> = {
   title: 'Aquarium/Data Entry/QueryItem/ValueSelector',
@@ -19,4 +19,4 @@ export default meta
 
 type Story = StoryObj<typeof ValueSelector>
 
-export const DontUseThisOrYouWillBeFired: Story = {}
+export const DontUseThisOrYouWillBeFired: Story = {}

src/components/data-entry/QueryItem/ValueSelector.tsx

@@ -1,10 +1,14 @@
-import { Cascader } from 'src/components/data-entry/QueryItem/Cascader'
-import { TextInput } from 'src/components/data-entry/QueryItem/TextInput'
+import Cascader from 'src/components/data-entry/QueryItem/Cascader'
+import TextInput from 'src/components/data-entry/QueryItem/TextInput'
+import NumberInput from 'src/components/data-entry/QueryItem/NumberInput'
 
-export const ValueSelector = () => {
+const ValueSelector = () => {
   // eslint-disable-next-line react/no-unescaped-entities
   return <>DON'T USE THIS OR YOU WILL BE FIRED!</>
 }
 
+export default ValueSelector
+
 ValueSelector.TextInput = TextInput
-ValueSelector.Cascader = Cascader
+ValueSelector.NumberInput = NumberInput
+ValueSelector.Cascader = Cascader

src/components/data-entry/QueryItem/query-item.css

@@ -42,12 +42,14 @@
   border-color: var(--mp-query-item-border-color-disabled) !important;
 }
 
-.query-item.query-item--input-text {
+.query-item.query-item--input-text, 
+.query-item.query-item--input-number {
   color: var(--mp-query-item-value-selector-color);
   font-weight: var(--mp-query-item-value-selector-font-weight);
 }
 
-.query-item.query-item--input-text::placeholder {
+.query-item.query-item--input-text::placeholder, 
+.query-item.query-item--input-number::placeholder {
   font-weight: normal;
 }
 
@@ -123,4 +125,4 @@
 /* This is a fix for a pre-existing Ant issue with the spacing on input.search */
 .query-item__input-search .ant-input-outlined {
   height: var(--control-height);
-}
+}