Merge branch 'main' into Typography

.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'],
         ],

CHANGELOG.md

@@ -1,3 +1,32 @@
+## [1.36.1](https://github.com/mParticle/aquarium/compare/v1.36.0...v1.36.1) (2024-12-06)
+
+### Bug Fixes
+
+- rename notification icons ([#508](https://github.com/mParticle/aquarium/issues/508)) ([98ea06f](https://github.com/mParticle/aquarium/commit/98ea06f1c0f66d7ca469f77158b1d4cf75cb8f6f))
+
+# [1.36.0](https://github.com/mParticle/aquarium/compare/v1.35.0...v1.36.0) (2024-11-28)
+
+### Bug Fixes
+
+- typography component updates ([#497](https://github.com/mParticle/aquarium/issues/497)) ([d32d390](https://github.com/mParticle/aquarium/commit/d32d3900c3d89406a0f88bccd967ed356e8edfe5))
+
+### Features
+
+- add abSplit icon ([#499](https://github.com/mParticle/aquarium/issues/499)) ([8776f1c](https://github.com/mParticle/aquarium/commit/8776f1c2fced9cc75af92fb74960510b4e56833a))
+- add notificationSubscriptions icon ([#505](https://github.com/mParticle/aquarium/issues/505)) ([b4976bc](https://github.com/mParticle/aquarium/commit/b4976bca3878813fadb453ff2426154b7fa1ef04))
+- utilize generics in UserPreferencesService ([#504](https://github.com/mParticle/aquarium/issues/504)) ([4838a86](https://github.com/mParticle/aquarium/commit/4838a86929bd743f606688ceefeaf13ebf5b1f9d))
+
+# [1.35.0](https://github.com/mParticle/aquarium/compare/v1.34.0...v1.35.0) (2024-11-15)
+
+### Bug Fixes
+
+- (styles) update font weight of modal ([#484](https://github.com/mParticle/aquarium/issues/484)) ([c2842ac](https://github.com/mParticle/aquarium/commit/c2842ac5494d2ec22e9bee9c0ff980922a67e2f4))
+- update release env variable ([#483](https://github.com/mParticle/aquarium/issues/483)) ([180c043](https://github.com/mParticle/aquarium/commit/180c0437c66578de3f0e8af25741f708c76c2845))
+
+### Features
+
+- DragAndDrop icon ([#492](https://github.com/mParticle/aquarium/issues/492)) ([fd2872d](https://github.com/mParticle/aquarium/commit/fd2872d7f19c50bd438da216685d4edf07efee71))
+
 # [1.34.0](https://github.com/mParticle/aquarium/compare/v1.33.2...v1.34.0) (2024-10-29)
 
 ### Features

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/Cell Types.mdx

@@ -0,0 +1,95 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as TableStories from './Table.stories'
+
+<Meta of={TableStories} />
+
+# Table Cells Types
+
+### Text
+
+Text cells support 1 or 2 lines of text. Single-line text cells are typically used for concise information like names, identifiers, or short labels. Two-line text cells are used when additional context is needed and can include entry type or ID, allowing for more detailed information without consuming excessive space.
+
+[Insert 2 lines example]
+
+#### Case
+
+We use sentence case for everything except for titles, which use title case. Exceptions are allowed based on a specific project requirements.
+
+#### Truncating Long names
+
+Column with most dynamic and longest copy to typically have flexible. When needed implement cell truncation by ending the text with ellipses and display the full text in a tooltip upon hovering.
+
+[Insert Example]
+
+#### Cell Alligment
+
+Text content within table cells is typically left-aligned to enhance readability and allow for easier scanning of information.
+### Date and Time
+
+To ensure clarity for both US and EU audiences, all dates and times should follow a standard global format. All times are displayed in UTC.
+
+#### Do
+
+- Date: MMM DD, YYYY (e.g., Sep 12, 2024), which removes any ambiguity between US (MM/DD) and EU (DD/MM) formats.
+- Time Zone: UTC (displayed once, somewhere visible on the screen).
+
+| Event          | Start Date (UTC) | End Date (UTC) |
+| -------------- | ---------------- | -------------- |
+| Product Launch | Sep 12, 2024     | Sep 14, 2024   |
+| Black Friday   | Nov 29, 2024     | Nov 29, 2024   |
+
+[Insert link: Displaying a link in a date picker]
+
+#### Don't
+
+- **Mix Date Formats**: Do not use different formats such as `MM/DD/YYYY` (e.g., 09/12/2024, which could be interpreted as either September 12 or December 9) or `DD/MM/YYYY` (e.g., 12/09/2024, which can also cause confusion). Stick to the global format `MMM DD, YYYY` (e.g., Sep 12, 2024).
+- **Omit the Time Zone**: Never omit the time zone when displaying times, especially when it might lead to user confusion. Example: Instead of just showing "14:30", show "14:30 UTC".
+- **Repeat UTC for Each Entry**: Avoid repeating "UTC" in every row of a table or list. Example: Instead of labeling every row "Sep 12, 2024 (UTC)", use a clear table header like `Date (UTC)` to indicate the time zone for all rows.
+
+
+### Status
+
+Always use badge components for system status. Reserve tags for actual tags, labels, and environment descriptions (e.g., prod, dev). This ensures clear visual distinction between different information types.
+
+
+-> Insert Example
+
+#### Cell Aligment
+
+Statuses are left-aligned to create a cohesive and organized table layout.
+
+### Links
+
+#### When to use:
+
+##### Text Links:
+
+Use the Link component [Insert Link] to navigate to other pages, sections, or external resources.
+
+##### Call-to-Actions (CTAs):
+
+Links that serve as action triggers, like "Activate", should also follow these styles.
+
+##### Buttons vs Links:
+
+Use links for navigation and "More Actions" menu or a buttons for actions.
+
+# More Actions Menu
+
+#### Overview
+
+The Actions Menu provides a consolidated interface for row-specific operations, such as delete, duplicate, download, and archive, all grouped within a single menu.
+
+#### Usage Guidelines
+
+- Highlight destructive actions in red to ensure emphasis and user caution.
+- Omit icons from menu items to maintain a clean, easy-to-read menu.
+- Display the "More Actions" menu even when only one option is available.
+
+#### Examples:
+
+- Disabled menu item (Coming Soon)
+
+
+

docs/UX Patterns/Table/Filters.mdx

@@ -1,31 +1,30 @@
 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
 
 <br />
 
 _Note: This section covers filters specifically for tables. For query-related filters, please refer to the [Analytics Filters - Coming Soon](#coming)._
 
-#### **Simple Filters**
+#### Filter Search
 
-Simple filters are ideal when there are only a few filter options. These are straightforward and quick to use, often appearing as dropdowns above the table. For implementation, refer to the [Select Component](https://mparticle.github.io/aquarium/?path=/docs/components-data-entry-select--documentation).
+Located above the table on the right, the search filter allows users to quickly find specific data within the table by entering keywords.
 
-Examples:
+#### **Simple Filters**
 
-<Story of={FiltersStories.WithBasicFilters} />
+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).
 
 #### **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**