Merge pull request #200 from mParticle/feat/query-items

feat: adding QueryItem components

src/components/data-display/Statistic/Statistic.stories.tsx

@@ -3,7 +3,7 @@ import { Row, Col, Button } from 'antd'
 import { Card } from 'src/components'
 import { type ICountdownProps, Statistic, type valueType } from 'src/components/data-display/Statistic/Statistic'
 import { Icon } from 'src/components/general/Icon/Icon'
-import { Text, Paragraph } from 'src/components/general/Typography/Typography'
+import { Typography } from 'src/components/general/Typography/Typography'
 import { ColorError, ColorInfoBg, ColorSuccess, PaddingXl } from 'src/styles/style'
 import { ExampleStory } from 'src/utils/ExampleStory'
 
@@ -29,8 +29,8 @@ const meta: Meta<typeof Statistic> = {
       options: ['default', 'code', 'error'],
       mapping: {
         default: (value: valueType) => `${value}`,
-        code: (value: valueType) => <Text code>{value}</Text>,
-        error: (value: valueType) => <Text type="danger">{value}</Text>,
+        code: (value: valueType) => <Typography.Text code>{value}</Typography.Text>,
+        error: (value: valueType) => <Typography.Text type="danger">{value}</Typography.Text>,
       },
     },
     prefix: {
@@ -67,9 +67,9 @@ export const CustomFormatter: Story = {
   args: {
     value: 112893,
     formatter: (value: valueType) => (
-      <Text code copyable>
+      <Typography.Text code copyable>
         {value}
-      </Text>
+      </Typography.Text>
     ),
   },
 }
@@ -153,9 +153,9 @@ export const ExampleWithUnit: Story = {
       <ExampleStory
         title="Add unit through prefix and suffix."
         description={
-          <Paragraph>
+          <Typography.Paragraph>
             Add unit through <code>prefix</code> and <code>suffix</code>
-          </Paragraph>
+          </Typography.Paragraph>
         }>
         <Row gutter={16}>
           <Col>

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

@@ -1,7 +1,7 @@
 import { Cascader as AntCascader } from 'antd'
 import { type CascaderProps as AntCascaderProps } from 'antd'
 import { type BaseOptionType } from 'antd/es/select'
-import { ConfigProvider } from 'antd'
+import { ConfigProvider } from 'src/components'
 
 export type ICascaderProps<DataNodeType extends BaseOptionType = any> = AntCascaderProps<DataNodeType>
 

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

@@ -1,5 +1,6 @@
 import { Input as AntInput } from 'antd'
 import { type InputProps as AntInputProps } from 'antd'
+import { SearchProps } from 'antd/es/input'
 import { ConfigProvider } from 'src/components'
 import { type InputRef } from 'antd'
 import { forwardRef, type ForwardRefExoticComponent, type Ref, type RefAttributes } from 'react'
@@ -8,6 +9,8 @@ export { Input, type InputRef, type IInputProps }
 
 interface IInputProps extends AntInputProps {}
 
+interface ISearchProps extends SearchProps {}
+
 type CompoundedComponent = ForwardRefExoticComponent<IInputProps & RefAttributes<InputRef>> & {
   Group: typeof AntInput.Group
   Search: typeof AntInput.Search
@@ -26,7 +29,15 @@ const InternalInput = (props: IInputProps, ref: Ref<InputRef>) => {
 const InternalInputWithRef = forwardRef(InternalInput)
 const Input = InternalInputWithRef as CompoundedComponent
 
+const InternalSearch = (props: ISearchProps, ref: Ref<InputRef>) => (
+  <ConfigProvider>
+    <AntInput.Search ref={ref} {...props} />
+  </ConfigProvider>
+)
+const InternalSearchWithRef = forwardRef(InternalSearch)
+const Search = InternalSearchWithRef as CompoundedComponent
+
+Input.Search = Search
 Input.Group = AntInput.Group
 Input.Password = AntInput.Password
-Input.Search = AntInput.Search
 Input.TextArea = AntInput.TextArea

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

@@ -0,0 +1,50 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+import { QueryItem } from 'src/components'
+
+const meta: Meta<typeof QueryItem.Action> = {
+  title: 'Aquarium/Data Entry/QueryItem/Action',
+  component: QueryItem.Action,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'This is the "Action" component of the QueryItem component group. This component is currently meant to trigger a single action, but will eventually support a list of actions via a dropdown list interface.',
+      },
+    },
+  },
+
+  args: {},
+}
+export default meta
+
+type Story = StoryObj<typeof QueryItem.Action>
+
+export const Primary: Story = {
+  args: {
+    text: 'Primary Action',
+    type: "primary"
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    text: 'Secondary Action',
+    type: "default"
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    text: 'Disabled Action',
+    type: "disabled"
+
+  },
+}
+
+export const OnClick: Story = {
+  args: {
+    text: 'On Click Action',
+    type: "primary",
+    onClick: () => alert('You clicked the QueryItem.Action!')
+  },
+}

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

@@ -0,0 +1,34 @@
+import { Icon, Button, IButtonProps } from 'src/components'
+import './query-item.css'
+
+export interface IActionProps {
+  type?: 'disabled' | 'primary' | 'default'
+  text?: string
+  onClick?: () => void
+}
+
+export 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`
+
+  const baseProps: IButtonProps = {
+    className: buttonClassNames,
+    type: props.type === 'disabled' ? 'default' : 'primary',
+    disabled: props.type === 'disabled',
+    onClick: props.onClick,
+  }
+
+  let iconColor: 'primary' | 'default' = 'primary'
+  if (props.type == 'default') iconColor = 'default'
+  if (props.type == 'disabled') iconColor = 'default'
+
+  return (
+    <>
+      <Button {...baseProps}>
+        <Icon name="add" size="md" color={iconColor} />
+        <span>{props.text}</span>
+      </Button>
+    </>
+  )
+}

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

@@ -0,0 +1,139 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { QueryItem } from 'src/components'
+
+const meta: Meta<typeof QueryItem.ValueSelector.Cascader> = {
+  title: 'Aquarium/Data Entry/QueryItem/ValueSelector/Cascader',
+  component: QueryItem.ValueSelector.Cascader,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'This is the "Action" component of the QueryItem component group. This component is currently meant to trigger a single action, but will eventually support a list of actions via a dropdown list interface.',
+      },
+    },
+  },
+
+  args: {},
+}
+export default meta
+
+type Story = StoryObj<typeof QueryItem.ValueSelector.Cascader>
+
+let exampleOptions = [
+  {
+    value: "United States1",
+    label: "United States",
+    children: [
+      {
+        value: "Michigan1",
+        label: "Michigan",
+        children: [
+          {
+            value: "Detroit1",
+            label: "Detroit",
+          },
+          {
+            value: "Lansing1",
+            label: "Lansing",
+          },
+        ],
+      },
+      {
+        value: "California1",
+        label: "California",
+        children: [
+          {
+            value: "San Francisco1",
+            label: "San Francisco",
+          },
+          {
+            value: "San Jose1",
+            label: "San Jose",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: "Canada1",
+    label: "Canada",
+    children: [
+      {
+        value: "Ontario1",
+        label: "Ontario",
+        children: [
+          {
+            value: "Toronto1",
+            label: "Toronto",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export const Default: Story = {
+  args: {
+    placeholder: "QueryItem.ValueSelector.Cascader Default",
+    options: exampleOptions
+  },
+}
+
+export const SimpleList: Story = {
+  args: {
+    placeholder: "QueryItem.ValueSelector.Cascader Simple",
+    options: [
+      {
+        value: 'United States',
+        label: 'United States',
+      },
+      {
+        value: 'Canada',
+        label: 'Canada',
+      },
+    ]
+  },
+}
+
+export const Error: Story = {
+  args: {
+    placeholder: "QueryItem.ValueSelector.Cascader Error",
+    options: exampleOptions,
+    errorMessage: 'test error',
+  },
+}
+
+export const Icon: Story = {
+  args: {
+    placeholder: "QueryItem.ValueSelector.Cascader Icon",
+    options: exampleOptions,
+    icon: 'event',
+  },
+}
+
+export const OnSelect: Story = {
+  args: {
+    placeholder: "QueryItem.ValueSelector.Cascader Error",
+    options: exampleOptions,
+    onChange: async (value) => console.log(value),
+  },
+}
+
+export const PreSelectedValue: Story = {
+  args: {
+    placeholder: "QueryItem.ValueSelector.Cascader PreSelected",
+    options: exampleOptions,
+    value: ["Canada1", "Ontario1", "Toronto1"],
+    onChange: async (values, _) => {console.log(values)},
+  },
+}
+
+export const LoadData: Story = {
+  args: {
+    placeholder: 'QueryItem.ValueSelector.Cascader Load',
+    options: exampleOptions,
+    loadData: (value: string) => {
+      console.log(value)
+    },
+  },
+}