Merge branch 'main' into feat/uni-1225

.eslintrc.cjs

@@ -124,6 +124,7 @@ module.exports = {
     'react/react-in-jsx-scope': 'off',
     'import/no-duplicates': 'off',
     'react/jsx-boolean-value': 'warn',
+    '@typescript-eslint/no-confusing-void-expression': ['error', { ignoreArrowShorthand: true }],
   },
   globals: {
     React: true,

.storybook/preview.tsx

@@ -1,9 +1,16 @@
 import type { Preview } from '@storybook/react'
+// import type { IndexEntry } from '@storybook/types'
 
 const preview: Preview = {
   parameters: {
     layout: 'centered',
     options: {
+      // TODO https://mparticle-eng.atlassian.net/browse/UNI-1214
+      // storySort: (a: IndexEntry, b: IndexEntry) => {
+      // console.log('Ordering stories', { a, b })
+      // const order = ['Documentation', 'Cell Types', 'Filters', 'Primary', 'Complex']
+      // return order.indexOf(a[1].name) - order.indexOf(b[1].name)
+      // },
       storySort: {
         order: [
           'About',
@@ -38,7 +45,7 @@ const preview: Preview = {
           ],
           'Candidate Components',
           'UX Patterns',
-          ['Table', ['Table', 'Filters']],
+          ['Table', ['Table', ['Documentation', 'Cell Types', 'Filters', 'Primary', 'Complex']]],
           'Contributing',
           ['Introduction', 'Commits', 'Testing in the platforms', 'Release Process', 'Maintainers'],
         ],

docs/Candidate Components/Directory/Date Range Filter/SelectWithRangePicker.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
-import { Select } from 'antd'
 import { useMemo, useState } from 'react'
 import { DateRangeString, type IDateRangeStringProps } from './DateRangeString'
-import type { RangePickerProps } from 'antd/es/date-picker'
-import type { BaseOptionType, DefaultOptionType } from 'antd/es/select'
 import dayjs from 'dayjs'
-import { DatePicker, Divider, Flex, type ISelectProps, Typography } from 'src/components'
+import { Select, DatePicker, Divider, Flex, type ISelectProps, Typography } from 'src/components'
+import type { IRangePickerProps } from 'src/components/data-entry/DatePicker/DatePicker'
+import type { SelectBaseOptionType, SelectDefaultOptionType } from 'src/components/data-entry/Select/Select'
 
 export type SelectWithRangePickerValue<ValueType> = ValueType | [string, string] | null
 
@@ -16,7 +15,7 @@ interface SelectWithRangePickerProps<ValueType, OptionType>
     'open' | 'value' | 'dropdownRender' | 'defaultValue' | 'mode'
   > {
   value: SelectWithRangePickerValue<ValueType>
-  rangePickerProps?: Omit<RangePickerProps, 'value' | 'onChange'>
+  rangePickerProps?: Omit<IRangePickerProps, 'value' | 'onChange'>
   rangePickerLabel?: React.ReactNode
   formatOptions?: IDateRangeStringProps['formatOptions']
 }
@@ -25,7 +24,7 @@ const DEFAULT_PICKER_LABEL = <Typography.Text>Custom date range</Typography.Text
 
 export const SelectWithRangePicker = <
   ValueType = SelectWithRangePickerValue<unknown>,
-  OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType,
+  OptionType extends SelectBaseOptionType | SelectDefaultOptionType = SelectDefaultOptionType,
 >({
   value,
   rangePickerProps = {},

docs/UX Patterns/Table/Filters.mdx

@@ -1,8 +1,8 @@
 import { Meta, Story } from '@storybook/blocks'
 
-import * as FiltersStories from './Filters.stories'
+import * as TableStories from './Table.stories'
 
-<Meta of={FiltersStories} />
+<Meta of={TableStories} />
 
 # Filters
 
@@ -11,24 +11,20 @@ import * as FiltersStories from './Filters.stories'
 _Note: This section covers filters specifically for tables. For query-related filters, please refer to the [Analytics Filters - Coming Soon](#coming)._
 
 #### Filter Search
+
 Located above the table on the right, the search filter allows users to quickly find specific data within the table by entering keywords.
 
 #### **Simple Filters**
 
 Simple filters are ideal when there are only a few filter options. These are straightforward and quick to use and appearing as dropdowns above the table. For examples, refer to the [Select Component](https://mparticle.github.io/aquarium/?path=/docs/components-data-entry-select--documentation).
 
-Examples:
-
-<Story of={FiltersStories.WithBasicFilters} />
-
 #### **Filters with Apply Button**
 
 Complex filters provide more advanced filtering options, allowing users to apply multiple criteria at once. These filters often include dropdowns, checkboxes, and text fields. Complex filters are particularly useful when multiple filters need to be applied simultaneously or when load times might be a concern.
 
-- daterange
-- modal: sorting, filters: one of each input type: checkboxes, input, tree select and placeholder for tags
+Example:
 
-<Story of={FiltersStories.WithComplexFilters} />
+<Story of={TableStories.WithComplexFilters} />
 
 #### **Date Range Filters**