From 94f494da60311892347f0fd8c278f67e0b25ee62 Mon Sep 17 00:00:00 2001 From: Gabriel Tiburcio Date: Wed, 16 Oct 2024 16:48:39 -0300 Subject: [PATCH 1/7] docs: moved some components to unused folder --- .storybook/preview.tsx | 15 ++- docs/UX Patterns/Directory.mdx | 3 + docs/UX Patterns/Table/Cell Badge.mdx | 1 + docs/UX Patterns/Table/Cell Link.mdx | 1 + docs/UX Patterns/Table/Cell More Actions.mdx | 18 ++++ docs/UX Patterns/Table/Cell Tag.mdx | 1 + docs/UX Patterns/Table/Documentation.mdx | 53 +++++++++++ docs/UX Patterns/Table/Filters.mdx | 20 ++++ docs/UX Patterns/Table/Table.stories.tsx | 94 +++++++++++++++++++ docs/UX Patterns/Table/Tags.mdx | 17 ++++ docs/components/Unused/Documentation.mdx | 3 + .../data-display/QRCode/QRCode.stories.tsx | 14 --- .../ColorPicker/ColorPicker.stories.tsx | 14 --- src/components/index.ts | 12 +-- .../Calendar/Calendar.stories.tsx | 4 +- .../Calendar/Calendar.tsx | 0 .../Carousel/Carousel.stories.tsx | 4 +- .../Carousel/Carousel.tsx | 0 .../ColorPicker/ColorPicker.stories.tsx | 14 +++ .../ColorPicker/ColorPicker.tsx | 2 +- .../unused/QRCode/QRCode.stories.tsx | 14 +++ .../QRCode/QRCode.tsx | 0 .../Rate/Rate.stories.tsx | 6 +- .../{data-entry => unused}/Rate/Rate.tsx | 2 +- .../Watermark/Watermark.stories.tsx | 22 +++-- .../Watermark/Watermark.tsx | 2 +- 26 files changed, 284 insertions(+), 52 deletions(-) create mode 100644 docs/UX Patterns/Directory.mdx create mode 100644 docs/UX Patterns/Table/Cell Badge.mdx create mode 100644 docs/UX Patterns/Table/Cell Link.mdx create mode 100644 docs/UX Patterns/Table/Cell More Actions.mdx create mode 100644 docs/UX Patterns/Table/Cell Tag.mdx create mode 100644 docs/UX Patterns/Table/Documentation.mdx create mode 100644 docs/UX Patterns/Table/Filters.mdx create mode 100644 docs/UX Patterns/Table/Table.stories.tsx create mode 100644 docs/UX Patterns/Table/Tags.mdx create mode 100644 docs/components/Unused/Documentation.mdx delete mode 100644 src/components/data-display/QRCode/QRCode.stories.tsx delete mode 100644 src/components/data-entry/ColorPicker/ColorPicker.stories.tsx rename src/components/{data-display => unused}/Calendar/Calendar.stories.tsx (71%) rename src/components/{data-display => unused}/Calendar/Calendar.tsx (100%) rename src/components/{data-display => unused}/Carousel/Carousel.stories.tsx (97%) rename src/components/{data-display => unused}/Carousel/Carousel.tsx (100%) create mode 100644 src/components/unused/ColorPicker/ColorPicker.stories.tsx rename src/components/{data-entry => unused}/ColorPicker/ColorPicker.tsx (83%) create mode 100644 src/components/unused/QRCode/QRCode.stories.tsx rename src/components/{data-display => unused}/QRCode/QRCode.tsx (100%) rename src/components/{data-entry => unused}/Rate/Rate.stories.tsx (50%) rename src/components/{data-entry => unused}/Rate/Rate.tsx (83%) rename src/components/{feedback => unused}/Watermark/Watermark.stories.tsx (94%) rename src/components/{feedback => unused}/Watermark/Watermark.tsx (82%) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 8e81f9bba..738c323fa 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -18,10 +18,21 @@ const preview: Preview = { 'Design Templates', ], 'Foundations', - 'Components', ['Colors', 'Typography', 'Icons', 'Errors', 'Loading'], + 'Components', + [ + 'Data Display', + 'Data Entry', + 'General', + 'Feedback', + 'Layout', + 'Navigation', + 'Other', + 'Unused', + ['Documentation'], + ], 'Candidate Components', - 'Design Templates', + 'UX Patterns', ['Table', ['Documentation', 'Filters'], 'Observability', 'Directory'], 'Contributing', ['Introduction', 'Commits', 'Testing in the platforms', 'Release Process', 'Maintainers'], diff --git a/docs/UX Patterns/Directory.mdx b/docs/UX Patterns/Directory.mdx new file mode 100644 index 000000000..db9c21e0f --- /dev/null +++ b/docs/UX Patterns/Directory.mdx @@ -0,0 +1,3 @@ +# Directory + +TBD \ No newline at end of file diff --git a/docs/UX Patterns/Table/Cell Badge.mdx b/docs/UX Patterns/Table/Cell Badge.mdx new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/docs/UX Patterns/Table/Cell Badge.mdx @@ -0,0 +1 @@ + diff --git a/docs/UX Patterns/Table/Cell Link.mdx b/docs/UX Patterns/Table/Cell Link.mdx new file mode 100644 index 000000000..ad9acf92a --- /dev/null +++ b/docs/UX Patterns/Table/Cell Link.mdx @@ -0,0 +1 @@ +![](../../assets/test.png) diff --git a/docs/UX Patterns/Table/Cell More Actions.mdx b/docs/UX Patterns/Table/Cell More Actions.mdx new file mode 100644 index 000000000..15b9950cb --- /dev/null +++ b/docs/UX Patterns/Table/Cell More Actions.mdx @@ -0,0 +1,18 @@ +### 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) + diff --git a/docs/UX Patterns/Table/Cell Tag.mdx b/docs/UX Patterns/Table/Cell Tag.mdx new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/docs/UX Patterns/Table/Cell Tag.mdx @@ -0,0 +1 @@ + diff --git a/docs/UX Patterns/Table/Documentation.mdx b/docs/UX Patterns/Table/Documentation.mdx new file mode 100644 index 000000000..bf8c4ec9a --- /dev/null +++ b/docs/UX Patterns/Table/Documentation.mdx @@ -0,0 +1,53 @@ +import { Meta, Story } from '@storybook/blocks'; + +{/* // import * as TableStories from './Table.stories'; */} + +{/* */} + +{/* */} + +# Table + +#### Overview +Tables present and organize data in a structured, readable format, ranging from basic displays to complex interfaces that support queries and data manipulation. + +#### Basic Table + +##### Header +A typical table header contains column titles that describe the data in each column. It includes functionality for sorting columns and may feature help icons with tooltips to provide additional information on each column’s purpose. + +##### Pagination +Use pagination in tables to improve performance and reduce load times by fetching only the data needed for the current page. + +##### Cell Types +Table cells support various formats and are designed to display data in clear, readable ways. +- Numbers (Coming Soon) +- Date / Time (Coming Soon) +- CTA Buttons (Coming Soon) +- Status Badges (Coming Soon) +- Links (Coming Soon) +- Tags (Coming Soon) +- More Actions (Coming Soon) + +[View Example](#link) + +#### Tables with Filters +Filters help users refine large datasets within tables. The mParticle table supports a range of filter types, including: + +- [Search](#link-to-search) +- [Date Range filters](#link-to-daterange) +- [Basic Filters](#link-to-basic-filters) +- [Filters with an Apply button](#link-to-apply-button-filters) + + + +#### Related Links +| Type | Resource | +| ------ | -------- | +| Eames | [Figma Templates](https://www.figma.com/design/yCPszaTtkCFxRHaSkkJFR9/Eames-Templates-%5BInternal%5D?node-id=2114-9632&node-type=frame&t=Aa9XxcKyme3ud4cb-0) | + + + +#### Example basic table image (To be changed) + + diff --git a/docs/UX Patterns/Table/Filters.mdx b/docs/UX Patterns/Table/Filters.mdx new file mode 100644 index 000000000..7a1bb0632 --- /dev/null +++ b/docs/UX Patterns/Table/Filters.mdx @@ -0,0 +1,20 @@ +# Filters + +*Note: This section covers filters specifically for tables. For query-related filters, please refer to the [Analytics Filters - Coming Soon](#coming).* + +#### **Simple Filters** +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). + +Examples: +- Coming Soon +- Coming Soon + +#### **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. + +#### **Date Range Filters** +Date range filters allow users to specify a range of dates to narrow down the data displayed in the table. Typically, these filters include a start date and an end date, with options for common ranges like “Last 7 days” or “Last 30 days.” User presets are also available for frequently used date ranges. + +Examples: +- [Basic Date Picker](https://mparticle.github.io/aquarium/?path=/docs/components-data-entry-date-picker--documentation) +- [Date Range Filter with Presets](https://mparticle.github.io/aquarium/?path=/docs/candidate-components-directory-date-range-filter--documentation) diff --git a/docs/UX Patterns/Table/Table.stories.tsx b/docs/UX Patterns/Table/Table.stories.tsx new file mode 100644 index 000000000..7f0726d44 --- /dev/null +++ b/docs/UX Patterns/Table/Table.stories.tsx @@ -0,0 +1,94 @@ +import type { Meta } from '@storybook/react' +import { Table } from 'src/components/data-display/Table/Table' +import { Space, Tag } from 'antd' +import type { TableProps } from 'antd' + +interface DataType { + key: string + name: string + age: number + address: string + tags: string[] +} + +const columns: TableProps['columns'] = [ + { + title: 'Name', + dataIndex: 'name', + key: 'name', + render: text => {text}, + }, + { + title: 'Age', + dataIndex: 'age', + key: 'age', + }, + { + title: 'Address', + dataIndex: 'address', + key: 'address', + }, + { + title: 'Tags', + key: 'tags', + dataIndex: 'tags', + render: (_, { tags }) => ( + <> + {tags.map(tag => { + let color = tag.length > 5 ? 'geekblue' : 'green' + if (tag === 'loser') { + color = 'volcano' + } + return ( + + {tag.toUpperCase()} + + ) + })} + + ), + }, + { + title: 'Action', + key: 'action', + render: (_, record) => ( + + Invite {record.name} + Delete + + ), + }, +] + +const data: DataType[] = [ + { + key: '1', + name: 'John Brown', + age: 32, + address: 'New York No. 1 Lake Park', + tags: ['nice', 'developer'], + }, + { + key: '2', + name: 'Jim Green', + age: 42, + address: 'London No. 1 Lake Park', + tags: ['loser'], + }, + { + key: '3', + name: 'Joe Black', + age: 32, + address: 'Sydney No. 1 Lake Park', + tags: ['cool', 'teacher'], + }, +] + +const meta: Meta = { + title: 'UX Patterns/Table', + component: () => columns={columns} dataSource={data} />, + + args: {}, +} + +export default meta diff --git a/docs/UX Patterns/Table/Tags.mdx b/docs/UX Patterns/Table/Tags.mdx new file mode 100644 index 000000000..88d4acf86 --- /dev/null +++ b/docs/UX Patterns/Table/Tags.mdx @@ -0,0 +1,17 @@ +### Tags in Tables + +#### Overview +Tags are used within tables to visually categorize or label data, providing users with quick context about specific rows or items. Tags can indicate statuses, categories, priorities, or any other metadata that helps users understand and interpret the data at a glance. + +#### Managing Tags +- **Creating Tags - COMING SOON** +- **Editing Tags - COMING SOON** +- **Deleting Tags - COMING SOON** + +#### Displaying Tags within Tables + +COMING SOON + +#### Filtering by Tags + +COMING SOON diff --git a/docs/components/Unused/Documentation.mdx b/docs/components/Unused/Documentation.mdx new file mode 100644 index 000000000..b28a07cb1 --- /dev/null +++ b/docs/components/Unused/Documentation.mdx @@ -0,0 +1,3 @@ +# Unused components + +The following components are not used in mParticle but can still be browsed if needed. \ No newline at end of file diff --git a/src/components/data-display/QRCode/QRCode.stories.tsx b/src/components/data-display/QRCode/QRCode.stories.tsx deleted file mode 100644 index e29c23242..000000000 --- a/src/components/data-display/QRCode/QRCode.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { type Meta, type StoryObj } from '@storybook/react' -import { QRCode } from 'src/components/data-display/QRCode/QRCode' - -const meta: Meta = { - title: 'Components/Data Display/QRCode', - component: QRCode, - - args: {}, -} -export default meta - -type Story = StoryObj - -export const Primary: Story = {} diff --git a/src/components/data-entry/ColorPicker/ColorPicker.stories.tsx b/src/components/data-entry/ColorPicker/ColorPicker.stories.tsx deleted file mode 100644 index 08a7a9965..000000000 --- a/src/components/data-entry/ColorPicker/ColorPicker.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { type Meta, type StoryObj } from '@storybook/react' -import { ColorPicker } from 'src/components/data-entry/ColorPicker/ColorPicker' - -const meta: Meta = { - title: 'Components/Data Entry/ColorPicker', - component: ColorPicker, - - args: {}, -} -export default meta - -type Story = StoryObj - -export const Primary: Story = {} diff --git a/src/components/index.ts b/src/components/index.ts index 7dce8bebb..9de918d0c 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,13 +1,13 @@ export { Button, type IButtonProps } from './general/Button/Button' export { FloatButton, type IFloatButtonProps } from './general/FloatButton/FloatButton' export { Icon, type IIconProps } from './general/Icon/Icon' -export { Rate, type IRateProps } from './data-entry/Rate/Rate' +export { Rate, type IRateProps } from './unused/Rate/Rate' export { Form, type IFormProps, type FormInstance } from './data-entry/Form/Form' export { TreeSelect, type ITreeSelectProps } from './data-entry/TreeSelect/TreeSelect' export { Select, type ISelectProps, type DefaultOptionType } from './data-entry/Select/Select' export { Mentions, type IMentionsProps } from './data-entry/Mentions/Mentions' export { Radio, type IRadioProps } from './data-entry/Radio/Radio' -export { ColorPicker, type IColorPickerProps } from './data-entry/ColorPicker/ColorPicker' +export { ColorPicker, type IColorPickerProps } from './unused/ColorPicker/ColorPicker' export { Slider, type ISliderProps } from './data-entry/Slider/Slider' export { Cascader, type ICascaderProps } from './data-entry/Cascader/Cascader' export { DatePicker, type IDatePickerProps } from './data-entry/DatePicker/DatePicker' @@ -26,17 +26,17 @@ export type { INumberInputProps } from './data-entry/QueryItem/NumberInput' export type { ITextInputProps } from './data-entry/QueryItem/TextInput' export { Collapse, type ICollapseProps } from './data-display/Collapse/Collapse' export { Timeline, type ITimelineProps } from './data-display/Timeline/Timeline' -export { Calendar, type ICalendarProps } from './data-display/Calendar/Calendar' +export { Calendar, type ICalendarProps } from './unused/Calendar/Calendar' export { Segmented, type ISegmentedProps } from './data-display/Segmented/Segmented' export { Tabs, type ITabsProps } from './data-display/Tabs/Tabs' export { Tag, type ITagProps } from './data-display/Tag/Tag' export { Tour, type ITourProps } from './data-display/Tour/Tour' -export { Carousel, type ICarouselProps } from './data-display/Carousel/Carousel' +export { Carousel, type ICarouselProps } from './unused/Carousel/Carousel' export { Tooltip, type ITooltipProps } from './data-display/Tooltip/Tooltip' export { Statistic, type IStatisticProps } from './data-display/Statistic/Statistic' export { Tree, type ITreeProps, type ITreeData } from './data-display/Tree/Tree' export { Image, type IImageProps } from './data-display/Image/Image' -export { QRCode, type IQRCodeProps } from './data-display/QRCode/QRCode' +export { QRCode, type IQRCodeProps } from './unused/QRCode/QRCode' export { Badge, type IBadgeProps } from './data-display/Badge/Badge' export { Card, type ICardProps } from './data-display/Card/Card' export { Avatar, type IAvatarProps } from './data-display/Avatar/Avatar' @@ -56,7 +56,7 @@ export { Progress, type IProgressProps } from './feedback/Progress/Progress' export { Result, type IResultProps } from './feedback/Result/Result' export { Spin, type ISpinProps } from './feedback/Spin/Spin' export { Skeleton, type ISkeletonProps } from './feedback/Skeleton/Skeleton' -export { Watermark, type IWatermarkProps } from './feedback/Watermark/Watermark' +export { Watermark, type IWatermarkProps } from './unused/Watermark/Watermark' export { Popconfirm, type IPopconfirmProps } from './feedback/Popconfirm/Popconfirm' export { Drawer, type IDrawerProps } from './feedback/Drawer/Drawer' export { Modal, type IModalProps } from './feedback/Modal/Modal' diff --git a/src/components/data-display/Calendar/Calendar.stories.tsx b/src/components/unused/Calendar/Calendar.stories.tsx similarity index 71% rename from src/components/data-display/Calendar/Calendar.stories.tsx rename to src/components/unused/Calendar/Calendar.stories.tsx index eb5d9b42e..14cd0424d 100644 --- a/src/components/data-display/Calendar/Calendar.stories.tsx +++ b/src/components/unused/Calendar/Calendar.stories.tsx @@ -1,9 +1,9 @@ import { type Meta, type StoryObj } from '@storybook/react' -import { Calendar } from 'src/components/data-display/Calendar/Calendar' +import { Calendar } from 'src/components/unused/Calendar/Calendar' import dayjs from 'dayjs' const meta: Meta = { - title: 'Components/Data Display/Calendar', + title: 'Components/Unused/Calendar', component: Calendar, args: { diff --git a/src/components/data-display/Calendar/Calendar.tsx b/src/components/unused/Calendar/Calendar.tsx similarity index 100% rename from src/components/data-display/Calendar/Calendar.tsx rename to src/components/unused/Calendar/Calendar.tsx diff --git a/src/components/data-display/Carousel/Carousel.stories.tsx b/src/components/unused/Carousel/Carousel.stories.tsx similarity index 97% rename from src/components/data-display/Carousel/Carousel.stories.tsx rename to src/components/unused/Carousel/Carousel.stories.tsx index f5a60633f..8beb9e703 100644 --- a/src/components/data-display/Carousel/Carousel.stories.tsx +++ b/src/components/unused/Carousel/Carousel.stories.tsx @@ -1,5 +1,5 @@ import { type Meta, type StoryObj } from '@storybook/react' -import { Carousel } from 'src/components/data-display/Carousel/Carousel' +import { Carousel } from 'src/components/unused/Carousel/Carousel' import { ExampleStory } from 'src/utils/ExampleStory' import { type RadioChangeEvent } from 'antd' import { type CarouselProps } from 'antd' @@ -16,7 +16,7 @@ const contentStyle: React.CSSProperties = { } const meta: Meta = { - title: 'Components/Data Display/Carousel', + title: 'Components/Unused/Carousel', component: props => (
diff --git a/src/components/data-display/Carousel/Carousel.tsx b/src/components/unused/Carousel/Carousel.tsx similarity index 100% rename from src/components/data-display/Carousel/Carousel.tsx rename to src/components/unused/Carousel/Carousel.tsx diff --git a/src/components/unused/ColorPicker/ColorPicker.stories.tsx b/src/components/unused/ColorPicker/ColorPicker.stories.tsx new file mode 100644 index 000000000..53ce1128d --- /dev/null +++ b/src/components/unused/ColorPicker/ColorPicker.stories.tsx @@ -0,0 +1,14 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { ColorPicker } from 'src/components/unused/ColorPicker/ColorPicker' + +const meta: Meta = { + title: 'Components/Unused/ColorPicker', + component: ColorPicker, + + args: {}, +} +export default meta + +type Story = StoryObj + +export const Primary: Story = {} diff --git a/src/components/data-entry/ColorPicker/ColorPicker.tsx b/src/components/unused/ColorPicker/ColorPicker.tsx similarity index 83% rename from src/components/data-entry/ColorPicker/ColorPicker.tsx rename to src/components/unused/ColorPicker/ColorPicker.tsx index bab2aa657..464c41340 100644 --- a/src/components/data-entry/ColorPicker/ColorPicker.tsx +++ b/src/components/unused/ColorPicker/ColorPicker.tsx @@ -1,5 +1,5 @@ import { ColorPicker as AntColorPicker } from 'antd' -import { type ColorPickerProps as AntColorPickerProps } from 'antd' +import type { ColorPickerProps as AntColorPickerProps } from 'antd' import { ConfigProvider } from 'src/components' export interface IColorPickerProps extends AntColorPickerProps {} diff --git a/src/components/unused/QRCode/QRCode.stories.tsx b/src/components/unused/QRCode/QRCode.stories.tsx new file mode 100644 index 000000000..2de41c37e --- /dev/null +++ b/src/components/unused/QRCode/QRCode.stories.tsx @@ -0,0 +1,14 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { QRCode } from 'src/components/unused/QRCode/QRCode' + +const meta: Meta = { + title: 'Components/Unused/QRCode', + component: QRCode, + + args: {}, +} +export default meta + +type Story = StoryObj + +export const Primary: Story = {} diff --git a/src/components/data-display/QRCode/QRCode.tsx b/src/components/unused/QRCode/QRCode.tsx similarity index 100% rename from src/components/data-display/QRCode/QRCode.tsx rename to src/components/unused/QRCode/QRCode.tsx diff --git a/src/components/data-entry/Rate/Rate.stories.tsx b/src/components/unused/Rate/Rate.stories.tsx similarity index 50% rename from src/components/data-entry/Rate/Rate.stories.tsx rename to src/components/unused/Rate/Rate.stories.tsx index c30d5c763..844786ed5 100644 --- a/src/components/data-entry/Rate/Rate.stories.tsx +++ b/src/components/unused/Rate/Rate.stories.tsx @@ -1,8 +1,8 @@ -import { type Meta, type StoryObj } from '@storybook/react' -import { Rate } from 'src/components/data-entry/Rate/Rate' +import type { Meta, StoryObj } from '@storybook/react' +import { Rate } from 'src/components/unused/Rate/Rate' const meta: Meta = { - title: 'Components/Data Entry/Rate', + title: 'Components/Unused/Rate', component: Rate, args: {}, diff --git a/src/components/data-entry/Rate/Rate.tsx b/src/components/unused/Rate/Rate.tsx similarity index 83% rename from src/components/data-entry/Rate/Rate.tsx rename to src/components/unused/Rate/Rate.tsx index 37f43b982..5821b11f4 100644 --- a/src/components/data-entry/Rate/Rate.tsx +++ b/src/components/unused/Rate/Rate.tsx @@ -1,5 +1,5 @@ import { Rate as AntRate } from 'antd' -import { type RateProps as AntRateProps } from 'antd' +import type { RateProps as AntRateProps } from 'antd' import { ConfigProvider } from 'src/components' export interface IRateProps extends AntRateProps {} diff --git a/src/components/feedback/Watermark/Watermark.stories.tsx b/src/components/unused/Watermark/Watermark.stories.tsx similarity index 94% rename from src/components/feedback/Watermark/Watermark.stories.tsx rename to src/components/unused/Watermark/Watermark.stories.tsx index 1f0f083dd..f1c9aad9f 100644 --- a/src/components/feedback/Watermark/Watermark.stories.tsx +++ b/src/components/unused/Watermark/Watermark.stories.tsx @@ -1,11 +1,11 @@ -import { type Meta, type StoryObj } from '@storybook/react' -import { Watermark } from 'src/components/feedback/Watermark/Watermark' +import type { Meta, StoryObj } from '@storybook/react' +import { Watermark } from 'src/components/unused/Watermark/Watermark' import { ExampleStory } from 'src/utils/ExampleStory' import { Flex, Form } from 'src/components' import { type GetProp } from 'antd' import { useState } from 'react' import { type IColorPickerProps } from 'src/components' -import { type IWatermarkProps } from 'src/components/feedback/Watermark/Watermark' +import { type IWatermarkProps } from 'src/components/unused/Watermark/Watermark' import { InputNumber } from 'src/components' import { Typography } from 'src/components/general/Typography/Typography' import { Input } from 'src/components' @@ -16,7 +16,7 @@ import { Modal } from 'src/components' import { Drawer } from 'src/components' const meta: Meta = { - title: 'Components/Feedback/Watermark', + title: 'Components/Unused/Watermark', component: props => (
@@ -181,13 +181,23 @@ export const ExampleConfig: Story = { more natural. img
Date: Wed, 16 Oct 2024 16:55:33 -0300 Subject: [PATCH 2/7] docs: reorder files --- .storybook/preview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 738c323fa..d0ca2db2a 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -29,7 +29,7 @@ const preview: Preview = { 'Navigation', 'Other', 'Unused', - ['Documentation'], + ['Documentation', 'Calendar', 'Carousel', 'ColorPicker', 'QRCode', 'Rate', 'Watermark'], ], 'Candidate Components', 'UX Patterns', From 044d5724acb42a56ec605d9338e4cdb5fe92263f Mon Sep 17 00:00:00 2001 From: Gabriel Tiburcio Date: Wed, 16 Oct 2024 18:47:49 -0300 Subject: [PATCH 3/7] docs: table basic example --- .../SelectWithRangePicker.stories.tsx | 1 - docs/Design Templates/Directory.mdx | 3 - docs/Design Templates/Table/Cell Badge.mdx | 1 - docs/Design Templates/Table/Cell Link.mdx | 1 - .../Table/Cell More Actions.mdx | 18 -- docs/Design Templates/Table/Cell Tag.mdx | 1 - docs/Design Templates/Table/Filters.mdx | 20 -- docs/Design Templates/Table/Table.mdx | 45 ---- docs/Design Templates/Table/Tags.mdx | 17 -- docs/UX Patterns/Table/Documentation.mdx | 49 ++-- docs/UX Patterns/Table/Table.stories.tsx | 241 +++++++++++++----- .../data-display/Table/Table.stories.tsx | 103 -------- src/components/data-display/Tag/Tag.tsx | 6 +- .../DatePicker/DatePicker.stories.tsx | 2 +- tsconfig.json | 2 +- 15 files changed, 214 insertions(+), 296 deletions(-) delete mode 100644 docs/Design Templates/Directory.mdx delete mode 100644 docs/Design Templates/Table/Cell Badge.mdx delete mode 100644 docs/Design Templates/Table/Cell Link.mdx delete mode 100644 docs/Design Templates/Table/Cell More Actions.mdx delete mode 100644 docs/Design Templates/Table/Cell Tag.mdx delete mode 100644 docs/Design Templates/Table/Filters.mdx delete mode 100644 docs/Design Templates/Table/Table.mdx delete mode 100644 docs/Design Templates/Table/Tags.mdx delete mode 100644 src/components/data-display/Table/Table.stories.tsx diff --git a/docs/Candidate Components/Directory/Date Range Filter/SelectWithRangePicker.stories.tsx b/docs/Candidate Components/Directory/Date Range Filter/SelectWithRangePicker.stories.tsx index 1945a1e6e..0b77e9297 100644 --- a/docs/Candidate Components/Directory/Date Range Filter/SelectWithRangePicker.stories.tsx +++ b/docs/Candidate Components/Directory/Date Range Filter/SelectWithRangePicker.stories.tsx @@ -1,4 +1,3 @@ -import React from 'react' import type { Meta, StoryObj } from '@storybook/react' import { SelectWithRangePicker as Component } from './SelectWithRangePicker' import { fn } from '@storybook/test' diff --git a/docs/Design Templates/Directory.mdx b/docs/Design Templates/Directory.mdx deleted file mode 100644 index db9c21e0f..000000000 --- a/docs/Design Templates/Directory.mdx +++ /dev/null @@ -1,3 +0,0 @@ -# Directory - -TBD \ No newline at end of file diff --git a/docs/Design Templates/Table/Cell Badge.mdx b/docs/Design Templates/Table/Cell Badge.mdx deleted file mode 100644 index 8b1378917..000000000 --- a/docs/Design Templates/Table/Cell Badge.mdx +++ /dev/null @@ -1 +0,0 @@ - diff --git a/docs/Design Templates/Table/Cell Link.mdx b/docs/Design Templates/Table/Cell Link.mdx deleted file mode 100644 index ad9acf92a..000000000 --- a/docs/Design Templates/Table/Cell Link.mdx +++ /dev/null @@ -1 +0,0 @@ -![](../../assets/test.png) diff --git a/docs/Design Templates/Table/Cell More Actions.mdx b/docs/Design Templates/Table/Cell More Actions.mdx deleted file mode 100644 index 15b9950cb..000000000 --- a/docs/Design Templates/Table/Cell More Actions.mdx +++ /dev/null @@ -1,18 +0,0 @@ -### 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) - diff --git a/docs/Design Templates/Table/Cell Tag.mdx b/docs/Design Templates/Table/Cell Tag.mdx deleted file mode 100644 index 8b1378917..000000000 --- a/docs/Design Templates/Table/Cell Tag.mdx +++ /dev/null @@ -1 +0,0 @@ - diff --git a/docs/Design Templates/Table/Filters.mdx b/docs/Design Templates/Table/Filters.mdx deleted file mode 100644 index 7a1bb0632..000000000 --- a/docs/Design Templates/Table/Filters.mdx +++ /dev/null @@ -1,20 +0,0 @@ -# Filters - -*Note: This section covers filters specifically for tables. For query-related filters, please refer to the [Analytics Filters - Coming Soon](#coming).* - -#### **Simple Filters** -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). - -Examples: -- Coming Soon -- Coming Soon - -#### **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. - -#### **Date Range Filters** -Date range filters allow users to specify a range of dates to narrow down the data displayed in the table. Typically, these filters include a start date and an end date, with options for common ranges like “Last 7 days” or “Last 30 days.” User presets are also available for frequently used date ranges. - -Examples: -- [Basic Date Picker](https://mparticle.github.io/aquarium/?path=/docs/components-data-entry-date-picker--documentation) -- [Date Range Filter with Presets](https://mparticle.github.io/aquarium/?path=/docs/candidate-components-directory-date-range-filter--documentation) diff --git a/docs/Design Templates/Table/Table.mdx b/docs/Design Templates/Table/Table.mdx deleted file mode 100644 index b3349ad2d..000000000 --- a/docs/Design Templates/Table/Table.mdx +++ /dev/null @@ -1,45 +0,0 @@ -# Table - -#### Overview -Tables present and organize data in a structured, readable format, ranging from basic displays to complex interfaces that support queries and data manipulation. - -#### Basic Table - -##### Header -A typical table header contains column titles that describe the data in each column. It includes functionality for sorting columns and may feature help icons with tooltips to provide additional information on each column’s purpose. - -##### Pagination -Use pagination in tables to improve performance and reduce load times by fetching only the data needed for the current page. - -##### Cell Types -Table cells support various formats and are designed to display data in clear, readable ways. -- Numbers (Coming Soon) -- Date / Time (Coming Soon) -- CTA Buttons (Coming Soon) -- Status Badges (Coming Soon) -- Links (Coming Soon) -- Tags (Coming Soon) -- More Actions (Coming Soon) - -[View Example](#link) - -#### Tables with Filters -Filters help users refine large datasets within tables. The mParticle table supports a range of filter types, including: - -- [Search](#link-to-search) -- [Date Range filters](#link-to-daterange) -- [Basic Filters](#link-to-basic-filters) -- [Filters with an Apply button](#link-to-apply-button-filters) - - - -#### Related Links -| Type | Resource | -| ------ | -------- | -| Eames | [Figma Templates](https://www.figma.com/design/yCPszaTtkCFxRHaSkkJFR9/Eames-Templates-%5BInternal%5D?node-id=2114-9632&node-type=frame&t=Aa9XxcKyme3ud4cb-0) | - - - -#### Example basic table image (To be changed) - - diff --git a/docs/Design Templates/Table/Tags.mdx b/docs/Design Templates/Table/Tags.mdx deleted file mode 100644 index 88d4acf86..000000000 --- a/docs/Design Templates/Table/Tags.mdx +++ /dev/null @@ -1,17 +0,0 @@ -### Tags in Tables - -#### Overview -Tags are used within tables to visually categorize or label data, providing users with quick context about specific rows or items. Tags can indicate statuses, categories, priorities, or any other metadata that helps users understand and interpret the data at a glance. - -#### Managing Tags -- **Creating Tags - COMING SOON** -- **Editing Tags - COMING SOON** -- **Deleting Tags - COMING SOON** - -#### Displaying Tags within Tables - -COMING SOON - -#### Filtering by Tags - -COMING SOON diff --git a/docs/UX Patterns/Table/Documentation.mdx b/docs/UX Patterns/Table/Documentation.mdx index bf8c4ec9a..dc814a791 100644 --- a/docs/UX Patterns/Table/Documentation.mdx +++ b/docs/UX Patterns/Table/Documentation.mdx @@ -1,26 +1,37 @@ -import { Meta, Story } from '@storybook/blocks'; +import { Meta, Story } from '@storybook/blocks' -{/* // import * as TableStories from './Table.stories'; */} +import * as TableStories from './Table.stories' -{/* */} + -{/* */} +# Table -# Table +
+ +### Overview -#### Overview Tables present and organize data in a structured, readable format, ranging from basic displays to complex interfaces that support queries and data manipulation. -#### Basic Table +--- + +### Basic Table + +
+ + + +### Header -##### Header A typical table header contains column titles that describe the data in each column. It includes functionality for sorting columns and may feature help icons with tooltips to provide additional information on each column’s purpose. -##### Pagination +### Pagination + Use pagination in tables to improve performance and reduce load times by fetching only the data needed for the current page. -##### Cell Types +### Cell Types + Table cells support various formats and are designed to display data in clear, readable ways. + - Numbers (Coming Soon) - Date / Time (Coming Soon) - CTA Buttons (Coming Soon) @@ -31,7 +42,8 @@ Table cells support various formats and are designed to display data in clear, r [View Example](#link) -#### Tables with Filters +### Tables with Filters + Filters help users refine large datasets within tables. The mParticle table supports a range of filter types, including: - [Search](#link-to-search) @@ -39,15 +51,8 @@ Filters help users refine large datasets within tables. The mParticle table supp - [Basic Filters](#link-to-basic-filters) - [Filters with an Apply button](#link-to-apply-button-filters) +### Related Links - -#### Related Links -| Type | Resource | -| ------ | -------- | -| Eames | [Figma Templates](https://www.figma.com/design/yCPszaTtkCFxRHaSkkJFR9/Eames-Templates-%5BInternal%5D?node-id=2114-9632&node-type=frame&t=Aa9XxcKyme3ud4cb-0) | - - - -#### Example basic table image (To be changed) - - +| Type | Resource | +| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Eames | [Figma Templates](https://www.figma.com/design/yCPszaTtkCFxRHaSkkJFR9/Eames-Templates-%5BInternal%5D?node-id=2114-9632&node-type=frame&t=Aa9XxcKyme3ud4cb-0) | diff --git a/docs/UX Patterns/Table/Table.stories.tsx b/docs/UX Patterns/Table/Table.stories.tsx index 7f0726d44..672d6d3b8 100644 --- a/docs/UX Patterns/Table/Table.stories.tsx +++ b/docs/UX Patterns/Table/Table.stories.tsx @@ -1,94 +1,217 @@ -import type { Meta } from '@storybook/react' -import { Table } from 'src/components/data-display/Table/Table' -import { Space, Tag } from 'antd' -import type { TableProps } from 'antd' +import type { ReactNode } from 'react' +import { CopyOutlined } from '@ant-design/icons' +import { faker } from '@faker-js/faker' +import type { Meta, StoryObj } from '@storybook/react' +import { + Flex, + Icon, + Input, + Select, + Badge, + type IBadgeProps, + Table, + type TableProps, + Tag, + type ITagProps, + Typography, + Space, + Tooltip, +} from 'src/components' +import { DatePickerWithDisabledYears } from 'src/components/data-entry/DatePicker/DatePicker.stories' interface DataType { key: string name: string - age: number - address: string - tags: string[] + id: string + timestamp: number + output: string + environment: Environment + status: Status + mpId: string } +type Environment = 'unknown' | 'development' | 'production' +type Status = 'draft' | 'error' | 'ready' + +const EnvironmentColors: Record = { + production: 'blue', + development: 'purple', + unknown: 'default', +} + +const EnvironmentNames: Record = { + production: 'Prod', + development: 'Dev', + unknown: 'Unknown', +} + +const getTagColorForEnvironment = (env: Environment): ITagProps['color'] => EnvironmentColors[env] + +const getNameForEnvironment = (env: Environment) => EnvironmentNames[env] + +const StatusColors: Record = { + draft: 'cyan', + error: 'red', + ready: 'green', +} + +const StatusNames: Record = { + draft: 'Draft', + error: 'Error', + ready: 'Ready', +} + +const getStatusColor = (status: Status) => StatusColors[status] + +const getStatusName = (status: Status) => StatusNames[status] + const columns: TableProps['columns'] = [ { title: 'Name', dataIndex: 'name', key: 'name', - render: text => {text}, + render: (name: string) => { + const path = window.location.pathname.split('/') + path.pop() + const route = `${path.join('/')}/${name}` + + return {name} + }, }, { - title: 'Age', - dataIndex: 'age', - key: 'age', + title: () => ( + + Help lorem ipsum. + + Learn More + + + }> + + ID + + + + ), + dataIndex: 'id', + key: 'id', }, { - title: 'Address', - dataIndex: 'address', - key: 'address', + title: 'Timestamp (UTC)', + dataIndex: 'timestamp', + key: 'timestamp', + render: (timestampInMicroseconds: number): string => { + return new Date(timestampInMicroseconds / (1000 * 1000)).toLocaleString(undefined, { + month: 'short', + day: '2-digit', + year: 'numeric', + hour: 'numeric', + minute: '2-digit', + second: '2-digit', + timeZone: 'UTC', + hour12: false, + }) + }, }, { - title: 'Tags', - key: 'tags', - dataIndex: 'tags', - render: (_, { tags }) => ( - <> - {tags.map(tag => { - let color = tag.length > 5 ? 'geekblue' : 'green' - if (tag === 'loser') { - color = 'volcano' - } - return ( - - {tag.toUpperCase()} - - ) - })} - - ), + title: 'mPID', + dataIndex: 'mpId', + key: 'mpId', + render: (mpId: string): ReactNode => { + return }}>{mpId} + }, }, { - title: 'Action', - key: 'action', - render: (_, record) => ( - - Invite {record.name} - Delete - - ), + title: 'Output', + dataIndex: 'output', + key: 'output', }, -] - -const data: DataType[] = [ { - key: '1', - name: 'John Brown', - age: 32, - address: 'New York No. 1 Lake Park', - tags: ['nice', 'developer'], + title: 'Environment', + key: 'environment', + dataIndex: 'environment', + render: (env: Environment): React.ReactNode => { + return {getNameForEnvironment(env)} + }, }, { - key: '2', - name: 'Jim Green', - age: 42, - address: 'London No. 1 Lake Park', - tags: ['loser'], + title: 'Status', + dataIndex: 'status', + key: 'status', + render: (status: Status): React.ReactNode => , }, { - key: '3', - name: 'Joe Black', - age: 32, - address: 'Sydney No. 1 Lake Park', - tags: ['cool', 'teacher'], + title: 'Actions', + dataIndex: 'actions', + key: 'actions', + render: (): ReactNode => ( + } + placeholder="Search" + style={{ width: '240px' }} + /> + + + columns={columns} dataSource={data} scroll={{ x: 'max-content' }} /> + + ), +} diff --git a/src/components/data-display/Table/Table.stories.tsx b/src/components/data-display/Table/Table.stories.tsx deleted file mode 100644 index 3fb878cb3..000000000 --- a/src/components/data-display/Table/Table.stories.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import { type Meta, type StoryObj } from '@storybook/react' -import { Table } from 'src/components/data-display/Table/Table' -import { Space, Tag } from 'antd' -import type { TableProps } from 'antd' - -const meta: Meta = { - title: 'Components/Data Display/Table', - component: Table, - - args: {}, -} -export default meta - -type Story = StoryObj - -// export const Primary: Story = {} - -const columns: TableProps['columns'] = [ - { - title: 'Name', - dataIndex: 'name', - key: 'name', - render: text => {text}, - }, - { - title: 'Age', - dataIndex: 'age', - key: 'age', - }, - { - title: 'Address', - dataIndex: 'address', - key: 'address', - }, - { - title: 'Tags', - key: 'tags', - dataIndex: 'tags', - render: (_, { tags }) => ( - <> - {tags.map(tag => { - let color = tag.length > 5 ? 'geekblue' : 'green' - if (tag === 'loser') { - color = 'volcano' - } - return ( - - {tag.toUpperCase()} - - ) - })} - - ), - }, - { - title: 'Action', - key: 'action', - render: (_, record) => ( - - Invite {record.name} - Delete - - ), - }, -] - -const data: DataType[] = [ - { - key: '1', - name: 'John Brown', - age: 32, - address: 'New York No. 1 Lake Park', - tags: ['nice', 'developer'], - }, - { - key: '2', - name: 'Jim Green', - age: 42, - address: 'London No. 1 Lake Park', - tags: ['loser'], - }, - { - key: '3', - name: 'Joe Black', - age: 32, - address: 'Sydney No. 1 Lake Park', - tags: ['cool', 'teacher'], - }, -] - -export const Secondary: Story = { - render: () => { - return columns={columns} dataSource={data} /> - }, -} - -interface DataType { - key: string - name: string - age: number - address: string - tags: string[] -} diff --git a/src/components/data-display/Tag/Tag.tsx b/src/components/data-display/Tag/Tag.tsx index 50dacfedd..dfe7e9912 100644 --- a/src/components/data-display/Tag/Tag.tsx +++ b/src/components/data-display/Tag/Tag.tsx @@ -1,6 +1,6 @@ import { Tag as AntTag } from 'antd' -import { type TagProps as AntTagProps } from 'antd' -import { type CheckableTagProps as AntCheckableTagProps } from 'antd/es/tag' +import type { TagProps as AntTagProps } from 'antd' +import type { CheckableTagProps as AntCheckableTagProps } from 'antd/es/tag' import { ConfigProvider } from 'src/components' export interface ITagProps extends AntTagProps { @@ -25,4 +25,4 @@ const CheckableTag = (props: CheckableTagProps) => { ) } -Tag.CheckableTag = CheckableTag \ No newline at end of file +Tag.CheckableTag = CheckableTag diff --git a/src/components/data-entry/DatePicker/DatePicker.stories.tsx b/src/components/data-entry/DatePicker/DatePicker.stories.tsx index 0f980fda5..ebf09db2a 100644 --- a/src/components/data-entry/DatePicker/DatePicker.stories.tsx +++ b/src/components/data-entry/DatePicker/DatePicker.stories.tsx @@ -4,7 +4,7 @@ import React, { useState } from 'react' import { type Meta, type StoryObj } from '@storybook/react' import { type CellRender as RcPickerCellRender, type CellRenderInfo } from 'rc-picker/lib/interface' -const DatePickerWithDisabledYears: React.FC = () => { +export const DatePickerWithDisabledYears: React.FC = () => { const [selectedDate, setSelectedDate] = useState(null) const disabledDate = (current: Dayjs): boolean => current && current.year() < 2023 const handleChange = (date: Dayjs | null) => { diff --git a/tsconfig.json b/tsconfig.json index 5a6892d8e..4abfde42d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,7 +10,7 @@ "jsx": "react-jsx", "lib": ["dom", "dom.iterable", "esnext"], "module": "esnext", - "moduleResolution": "bundler", + "moduleResolution": "node", "target": "es2015", "noImplicitAny": true, From f6aba2cbc7ac65e9105fa173e99cee502d0596e0 Mon Sep 17 00:00:00 2001 From: Gabriel Tiburcio Date: Fri, 18 Oct 2024 15:38:36 -0300 Subject: [PATCH 4/7] docs: improvements in table docs --- .storybook/preview.tsx | 2 +- docs/UX Patterns/Directory.mdx | 3 - docs/UX Patterns/Table/Cell Badge.mdx | 6 + docs/UX Patterns/Table/Cell Link.mdx | 8 +- docs/UX Patterns/Table/Cell More Actions.mdx | 21 +- docs/UX Patterns/Table/Cell Tag.mdx | 6 + docs/UX Patterns/Table/Filters.mdx | 29 +- docs/UX Patterns/Table/Filters.stories.tsx | 278 ++++++++++++++++++ .../Table/{Documentation.mdx => Table.mdx} | 5 +- docs/UX Patterns/Table/Table.stories.tsx | 5 +- tsconfig.json | 5 +- vite.config.js | 3 +- 12 files changed, 349 insertions(+), 22 deletions(-) delete mode 100644 docs/UX Patterns/Directory.mdx create mode 100644 docs/UX Patterns/Table/Filters.stories.tsx rename docs/UX Patterns/Table/{Documentation.mdx => Table.mdx} (94%) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index d0ca2db2a..a7e0f1ed2 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -33,7 +33,7 @@ const preview: Preview = { ], 'Candidate Components', 'UX Patterns', - ['Table', ['Documentation', 'Filters'], 'Observability', 'Directory'], + ['Table', ['Table', 'Filters']], 'Contributing', ['Introduction', 'Commits', 'Testing in the platforms', 'Release Process', 'Maintainers'], ], diff --git a/docs/UX Patterns/Directory.mdx b/docs/UX Patterns/Directory.mdx deleted file mode 100644 index db9c21e0f..000000000 --- a/docs/UX Patterns/Directory.mdx +++ /dev/null @@ -1,3 +0,0 @@ -# Directory - -TBD \ No newline at end of file diff --git a/docs/UX Patterns/Table/Cell Badge.mdx b/docs/UX Patterns/Table/Cell Badge.mdx index 8b1378917..451f8f4b4 100644 --- a/docs/UX Patterns/Table/Cell Badge.mdx +++ b/docs/UX Patterns/Table/Cell Badge.mdx @@ -1 +1,7 @@ +import { Meta, Story } from '@storybook/blocks' +import * as TableStories from './Table.stories' + + + +# Cell Badge diff --git a/docs/UX Patterns/Table/Cell Link.mdx b/docs/UX Patterns/Table/Cell Link.mdx index ad9acf92a..e95e254a2 100644 --- a/docs/UX Patterns/Table/Cell Link.mdx +++ b/docs/UX Patterns/Table/Cell Link.mdx @@ -1 +1,7 @@ -![](../../assets/test.png) +import { Meta, Story } from '@storybook/blocks' + +import * as TableStories from './Table.stories' + + + +# Cell Link diff --git a/docs/UX Patterns/Table/Cell More Actions.mdx b/docs/UX Patterns/Table/Cell More Actions.mdx index 15b9950cb..4f78c61ea 100644 --- a/docs/UX Patterns/Table/Cell More Actions.mdx +++ b/docs/UX Patterns/Table/Cell More Actions.mdx @@ -1,18 +1,29 @@ -### More Actions Menu +import { Meta, Story } from '@storybook/blocks' -#### 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. +import * as TableStories from './Table.stories' - + +# Cell Tag +### 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) +- Disabled menu item (Coming Soon) diff --git a/docs/UX Patterns/Table/Cell Tag.mdx b/docs/UX Patterns/Table/Cell Tag.mdx index 8b1378917..4bfad855b 100644 --- a/docs/UX Patterns/Table/Cell Tag.mdx +++ b/docs/UX Patterns/Table/Cell Tag.mdx @@ -1 +1,7 @@ +import { Meta, Story } from '@storybook/blocks' +import * as TableStories from './Table.stories' + + + +# Cell Tag diff --git a/docs/UX Patterns/Table/Filters.mdx b/docs/UX Patterns/Table/Filters.mdx index 7a1bb0632..17bc020a7 100644 --- a/docs/UX Patterns/Table/Filters.mdx +++ b/docs/UX Patterns/Table/Filters.mdx @@ -1,20 +1,37 @@ +import { Meta, Story } from '@storybook/blocks' + +import * as FiltersStories from './Filters.stories' + + + # Filters -*Note: This section covers filters specifically for tables. For query-related filters, please refer to the [Analytics Filters - Coming Soon](#coming).* +
+ +_Note: This section covers filters specifically for tables. For query-related filters, please refer to the [Analytics Filters - Coming Soon](#coming)._ + +#### **Simple Filters** -#### **Simple Filters** 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). Examples: -- Coming Soon -- Coming Soon -#### **Filters with Apply Button** + + +#### **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. -#### **Date Range Filters** +- daterange +- modal: sorting, filters: one of each input type: checkboxes, input, tree select and placeholder for tags + + + +#### **Date Range Filters** + Date range filters allow users to specify a range of dates to narrow down the data displayed in the table. Typically, these filters include a start date and an end date, with options for common ranges like “Last 7 days” or “Last 30 days.” User presets are also available for frequently used date ranges. Examples: + - [Basic Date Picker](https://mparticle.github.io/aquarium/?path=/docs/components-data-entry-date-picker--documentation) - [Date Range Filter with Presets](https://mparticle.github.io/aquarium/?path=/docs/candidate-components-directory-date-range-filter--documentation) diff --git a/docs/UX Patterns/Table/Filters.stories.tsx b/docs/UX Patterns/Table/Filters.stories.tsx new file mode 100644 index 000000000..8b3bac047 --- /dev/null +++ b/docs/UX Patterns/Table/Filters.stories.tsx @@ -0,0 +1,278 @@ +import type { ReactNode } from 'react' +import { CopyOutlined } from '@ant-design/icons' +import { faker } from '@faker-js/faker' +import type { Meta, StoryObj } from '@storybook/react' +import { + Flex, + Icon, + Input, + Select, + Badge, + type IBadgeProps, + Table, + type TableProps, + Tag, + type ITagProps, + Typography, + Space, + Tooltip, +} from 'src/components' +import { DatePickerWithDisabledYears } from 'src/components/data-entry/DatePicker/DatePicker.stories' +import { SelectWithRangePicker } from 'docs/Candidate Components/Directory/Date Range Filter/SelectWithRangePicker' + +interface DataType { + key: string + name: string + id: string + timestamp: number + output: string + environment: Environment + status: Status + mpId: string +} + +type Environment = 'unknown' | 'development' | 'production' +type Status = 'draft' | 'error' | 'ready' + +const EnvironmentColors: Record = { + production: 'blue', + development: 'purple', + unknown: 'default', +} + +const EnvironmentNames: Record = { + production: 'Prod', + development: 'Dev', + unknown: 'Unknown', +} + +const getTagColorForEnvironment = (env: Environment): ITagProps['color'] => EnvironmentColors[env] + +const getNameForEnvironment = (env: Environment) => EnvironmentNames[env] + +const StatusColors: Record = { + draft: 'cyan', + error: 'red', + ready: 'green', +} + +const StatusNames: Record = { + draft: 'Draft', + error: 'Error', + ready: 'Ready', +} + +const getStatusColor = (status: Status) => StatusColors[status] + +const getStatusName = (status: Status) => StatusNames[status] + +const columns: TableProps['columns'] = [ + { + title: 'Name', + dataIndex: 'name', + key: 'name', + render: (name: string) => { + const path = window.location.pathname.split('/') + path.pop() + const route = `${path.join('/')}/${name}` + + return {name} + }, + }, + { + title: () => ( + + Help lorem ipsum. + + Learn More + + + }> + + ID + + + + ), + dataIndex: 'id', + key: 'id', + }, + { + title: 'Timestamp (UTC)', + dataIndex: 'timestamp', + key: 'timestamp', + render: (timestampInMicroseconds: number): string => { + return new Date(timestampInMicroseconds / (1000 * 1000)).toLocaleString(undefined, { + month: 'short', + day: '2-digit', + year: 'numeric', + hour: 'numeric', + minute: '2-digit', + second: '2-digit', + timeZone: 'UTC', + hour12: false, + }) + }, + }, + { + title: 'mPID', + dataIndex: 'mpId', + key: 'mpId', + render: (mpId: string): ReactNode => { + return }}>{mpId} + }, + }, + { + title: 'Output', + dataIndex: 'output', + key: 'output', + }, + { + title: 'Environment', + key: 'environment', + dataIndex: 'environment', + render: (env: Environment): React.ReactNode => { + return {getNameForEnvironment(env)} + }, + }, + { + title: 'Status', + dataIndex: 'status', + key: 'status', + render: (status: Status): React.ReactNode => , + }, + { + title: 'Actions', + dataIndex: 'actions', + key: 'actions', + render: (): ReactNode => ( + } + placeholder="Search" + style={{ width: '240px' }} + /> + + + columns={columns} dataSource={data} scroll={{ x: 'max-content' }} /> + + ), +} + +const TIME_OPTIONS = [ + { + value: 'last12hours', + label: 'Last 12 hours', + } as const, + { + value: 'last7days', + label: 'Last 7 days', + } as const, + { + value: 'last14days', + label: 'Last 14 days', + } as const, +] + +export const WithComplexFilters: Story = { + name: 'Complex', + render: () => ( + + + + + onUpdateFilters({ time })} + rangePickerProps={{ + showTime: true, + showHour: true, + showMinute: true, + showSecond: false, + disabledDate: antdDayJS => { + const fourteenDaysInMs = 14 * 24 * 60 * 60 * 1000 + return antdDayJS.isBefore(new Date(Date.now() - fourteenDaysInMs)) + }, + }} + /> + + } + placeholder="Search" + style={{ width: '240px' }} + /> + + + columns={columns} dataSource={data} scroll={{ x: 'max-content' }} /> + + ), +} diff --git a/docs/UX Patterns/Table/Documentation.mdx b/docs/UX Patterns/Table/Table.mdx similarity index 94% rename from docs/UX Patterns/Table/Documentation.mdx rename to docs/UX Patterns/Table/Table.mdx index dc814a791..e284b16c6 100644 --- a/docs/UX Patterns/Table/Documentation.mdx +++ b/docs/UX Patterns/Table/Table.mdx @@ -6,6 +6,9 @@ import * as TableStories from './Table.stories' # Table +Bug in More Actions +Move Header, Pagination and Cell Types to the top +
### Overview @@ -18,7 +21,7 @@ Tables present and organize data in a structured, readable format, ranging from
- + ### Header diff --git a/docs/UX Patterns/Table/Table.stories.tsx b/docs/UX Patterns/Table/Table.stories.tsx index 672d6d3b8..ca6cf1c67 100644 --- a/docs/UX Patterns/Table/Table.stories.tsx +++ b/docs/UX Patterns/Table/Table.stories.tsx @@ -185,7 +185,7 @@ const data: DataType[] = faker.helpers.multiple(createMockRow, { }) const meta: Meta = { - title: 'UX Patterns/Table', + title: 'UX Patterns/Table/Table', component: Table, args: {}, @@ -195,7 +195,8 @@ export default meta type Story = StoryObj -export const Primary: Story = { +export const BasicTable: Story = { + name: 'Basic Table', render: () => ( diff --git a/tsconfig.json b/tsconfig.json index 4abfde42d..61704f793 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,7 +2,8 @@ "compilerOptions": { "baseUrl": ".", "paths": { - "src/*": ["./src/*"] + "src/*": ["./src/*"], + "docs/*": ["./docs/*"] }, "allowSyntheticDefaultImports": true, "esModuleInterop": true, @@ -24,5 +25,5 @@ "types": ["vitest/globals"] }, - "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts", "docs/**/*.ts", "docs/**/*.tsx"] + "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts", "docs/**/*.ts", "docs/**/*.tsx", "vite.config.js"] } diff --git a/vite.config.js b/vite.config.js index 24d20aa43..67fdf23f1 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,4 +1,4 @@ -import { resolve } from 'path' +import { resolve } from 'node:path' import { defineConfig } from 'vite' import dts from 'vite-plugin-dts' import svgr from 'vite-plugin-svgr' @@ -11,6 +11,7 @@ export default defineConfig({ resolve: { alias: { src: '/src', + docs: '/docs', design: '/design', }, }, From feb62dfd772a67c1fd4372f89a3c0feb60d16c0c Mon Sep 17 00:00:00 2001 From: Gabriel Tiburcio Date: Mon, 21 Oct 2024 18:28:58 -0300 Subject: [PATCH 5/7] docs: reviews on tables and re-structuring --- docs/UX Patterns/Directory.mdx | 3 -- docs/UX Patterns/Table/Cell Tag.mdx | 20 +++++++++ docs/UX Patterns/Table/Documentation.mdx | 53 ------------------------ docs/UX Patterns/Table/Table.stories.tsx | 40 +++++++++--------- docs/UX Patterns/Table/Tags.mdx | 17 -------- 5 files changed, 40 insertions(+), 93 deletions(-) delete mode 100644 docs/UX Patterns/Directory.mdx delete mode 100644 docs/UX Patterns/Table/Documentation.mdx delete mode 100644 docs/UX Patterns/Table/Tags.mdx diff --git a/docs/UX Patterns/Directory.mdx b/docs/UX Patterns/Directory.mdx deleted file mode 100644 index db9c21e0f..000000000 --- a/docs/UX Patterns/Directory.mdx +++ /dev/null @@ -1,3 +0,0 @@ -# Directory - -TBD \ No newline at end of file diff --git a/docs/UX Patterns/Table/Cell Tag.mdx b/docs/UX Patterns/Table/Cell Tag.mdx index 4bfad855b..086174e98 100644 --- a/docs/UX Patterns/Table/Cell Tag.mdx +++ b/docs/UX Patterns/Table/Cell Tag.mdx @@ -5,3 +5,23 @@ import * as TableStories from './Table.stories' # Cell Tag + +### Tags in Tables + +#### Overview + +Tags are used within tables to visually categorize or label data, providing users with quick context about specific rows or items. Tags can indicate statuses, categories, priorities, or any other metadata that helps users understand and interpret the data at a glance. + +#### Managing Tags + +- **Creating Tags - COMING SOON** +- **Editing Tags - COMING SOON** +- **Deleting Tags - COMING SOON** + +#### Displaying Tags within Tables + +COMING SOON + +#### Filtering by Tags + +COMING SOON diff --git a/docs/UX Patterns/Table/Documentation.mdx b/docs/UX Patterns/Table/Documentation.mdx deleted file mode 100644 index bf8c4ec9a..000000000 --- a/docs/UX Patterns/Table/Documentation.mdx +++ /dev/null @@ -1,53 +0,0 @@ -import { Meta, Story } from '@storybook/blocks'; - -{/* // import * as TableStories from './Table.stories'; */} - -{/* */} - -{/* */} - -# Table - -#### Overview -Tables present and organize data in a structured, readable format, ranging from basic displays to complex interfaces that support queries and data manipulation. - -#### Basic Table - -##### Header -A typical table header contains column titles that describe the data in each column. It includes functionality for sorting columns and may feature help icons with tooltips to provide additional information on each column’s purpose. - -##### Pagination -Use pagination in tables to improve performance and reduce load times by fetching only the data needed for the current page. - -##### Cell Types -Table cells support various formats and are designed to display data in clear, readable ways. -- Numbers (Coming Soon) -- Date / Time (Coming Soon) -- CTA Buttons (Coming Soon) -- Status Badges (Coming Soon) -- Links (Coming Soon) -- Tags (Coming Soon) -- More Actions (Coming Soon) - -[View Example](#link) - -#### Tables with Filters -Filters help users refine large datasets within tables. The mParticle table supports a range of filter types, including: - -- [Search](#link-to-search) -- [Date Range filters](#link-to-daterange) -- [Basic Filters](#link-to-basic-filters) -- [Filters with an Apply button](#link-to-apply-button-filters) - - - -#### Related Links -| Type | Resource | -| ------ | -------- | -| Eames | [Figma Templates](https://www.figma.com/design/yCPszaTtkCFxRHaSkkJFR9/Eames-Templates-%5BInternal%5D?node-id=2114-9632&node-type=frame&t=Aa9XxcKyme3ud4cb-0) | - - - -#### Example basic table image (To be changed) - - diff --git a/docs/UX Patterns/Table/Table.stories.tsx b/docs/UX Patterns/Table/Table.stories.tsx index ca6cf1c67..208a9adb9 100644 --- a/docs/UX Patterns/Table/Table.stories.tsx +++ b/docs/UX Patterns/Table/Table.stories.tsx @@ -18,6 +18,7 @@ import { Tooltip, } from 'src/components' import { DatePickerWithDisabledYears } from 'src/components/data-entry/DatePicker/DatePicker.stories' +import { ColorPrimary, ColorSuccess, ColorTextPlaceholder } from 'src/styles/style' interface DataType { key: string @@ -30,19 +31,17 @@ interface DataType { mpId: string } -type Environment = 'unknown' | 'development' | 'production' +type Environment = 'development' | 'production' type Status = 'draft' | 'error' | 'ready' const EnvironmentColors: Record = { production: 'blue', development: 'purple', - unknown: 'default', } const EnvironmentNames: Record = { production: 'Prod', development: 'Dev', - unknown: 'Unknown', } const getTagColorForEnvironment = (env: Environment): ITagProps['color'] => EnvironmentColors[env] @@ -50,9 +49,9 @@ const getTagColorForEnvironment = (env: Environment): ITagProps['color'] => Envi const getNameForEnvironment = (env: Environment) => EnvironmentNames[env] const StatusColors: Record = { - draft: 'cyan', - error: 'red', - ready: 'green', + draft: ColorTextPlaceholder, + error: ColorPrimary, + ready: ColorSuccess, } const StatusNames: Record = { @@ -80,20 +79,20 @@ const columns: TableProps['columns'] = [ }, { title: () => ( - - Help lorem ipsum. - - Learn More - - - }> - - ID + + ID + + Help lorem ipsum. + + Learn More + + + }> - - + + ), dataIndex: 'id', key: 'id', @@ -151,6 +150,7 @@ const columns: TableProps['columns'] = [ suffixIcon={} variant="borderless" dropdownStyle={{ width: '200px' }} + value={null} options={[ { label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' }, @@ -175,7 +175,7 @@ function createMockRow(): DataType { timestamp: faker.date.recent().valueOf() * 1000 * 1000, mpId: faker.number.int({ max: 9_999_999_999 }).toString(), output: faker.helpers.arrayElement(['Braze', 'mP Analytics', 'Cortex', 'Applytics', 'Google Analytics']), - environment: faker.helpers.arrayElement(['unknown', 'development', 'production']), + environment: faker.helpers.arrayElement(['development', 'production']), status: faker.helpers.arrayElement(['draft', 'error', 'ready']), } } diff --git a/docs/UX Patterns/Table/Tags.mdx b/docs/UX Patterns/Table/Tags.mdx deleted file mode 100644 index 88d4acf86..000000000 --- a/docs/UX Patterns/Table/Tags.mdx +++ /dev/null @@ -1,17 +0,0 @@ -### Tags in Tables - -#### Overview -Tags are used within tables to visually categorize or label data, providing users with quick context about specific rows or items. Tags can indicate statuses, categories, priorities, or any other metadata that helps users understand and interpret the data at a glance. - -#### Managing Tags -- **Creating Tags - COMING SOON** -- **Editing Tags - COMING SOON** -- **Deleting Tags - COMING SOON** - -#### Displaying Tags within Tables - -COMING SOON - -#### Filtering by Tags - -COMING SOON From cd87f4dd106161b7d97186bfb1b13674454aafc8 Mon Sep 17 00:00:00 2001 From: Gabriel Tiburcio Date: Mon, 21 Oct 2024 18:36:14 -0300 Subject: [PATCH 6/7] docs: merge changes from #462 --- .../Table/{Cell Badge.mdx => Cell CTA.mdx} | 2 +- docs/UX Patterns/Table/Cell Link.mdx | 16 ++++++++++ docs/UX Patterns/Table/Cell More Actions.mdx | 12 ++------ docs/UX Patterns/Table/Cell Status.mdx | 23 +++++++++++++++ docs/UX Patterns/Table/Cell Tag.mdx | 27 ----------------- docs/UX Patterns/Table/Cell Text.mdx | 27 +++++++++++++++++ docs/UX Patterns/Table/Date and Time.mdx | 29 +++++++++++++++++++ docs/UX Patterns/Table/Table.mdx | 5 ++-- 8 files changed, 100 insertions(+), 41 deletions(-) rename docs/UX Patterns/Table/{Cell Badge.mdx => Cell CTA.mdx} (90%) create mode 100644 docs/UX Patterns/Table/Cell Status.mdx delete mode 100644 docs/UX Patterns/Table/Cell Tag.mdx create mode 100644 docs/UX Patterns/Table/Cell Text.mdx create mode 100644 docs/UX Patterns/Table/Date and Time.mdx diff --git a/docs/UX Patterns/Table/Cell Badge.mdx b/docs/UX Patterns/Table/Cell CTA.mdx similarity index 90% rename from docs/UX Patterns/Table/Cell Badge.mdx rename to docs/UX Patterns/Table/Cell CTA.mdx index 451f8f4b4..19c5be73f 100644 --- a/docs/UX Patterns/Table/Cell Badge.mdx +++ b/docs/UX Patterns/Table/Cell CTA.mdx @@ -4,4 +4,4 @@ import * as TableStories from './Table.stories' -# Cell Badge +# Cell CTA diff --git a/docs/UX Patterns/Table/Cell Link.mdx b/docs/UX Patterns/Table/Cell Link.mdx index e95e254a2..78f217591 100644 --- a/docs/UX Patterns/Table/Cell Link.mdx +++ b/docs/UX Patterns/Table/Cell Link.mdx @@ -5,3 +5,19 @@ import * as TableStories from './Table.stories' # Cell Link + +### 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. diff --git a/docs/UX Patterns/Table/Cell More Actions.mdx b/docs/UX Patterns/Table/Cell More Actions.mdx index 4f78c61ea..95a8e2f59 100644 --- a/docs/UX Patterns/Table/Cell More Actions.mdx +++ b/docs/UX Patterns/Table/Cell More Actions.mdx @@ -4,26 +4,18 @@ import * as TableStories from './Table.stories' -# Cell Tag - -### More Actions Menu +# 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: +#### Examples: - Disabled menu item (Coming Soon) diff --git a/docs/UX Patterns/Table/Cell Status.mdx b/docs/UX Patterns/Table/Cell Status.mdx new file mode 100644 index 000000000..57b8bd603 --- /dev/null +++ b/docs/UX Patterns/Table/Cell Status.mdx @@ -0,0 +1,23 @@ +import { Meta, Story } from '@storybook/blocks' + +import * as TableStories from './Table.stories' + + + +# Table Cells + +### 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. + +#### Do + + + +#### Don't + + + +### Cell Aligment + +Statuses are left-aligned to create a cohesive and organized table layout. diff --git a/docs/UX Patterns/Table/Cell Tag.mdx b/docs/UX Patterns/Table/Cell Tag.mdx deleted file mode 100644 index 086174e98..000000000 --- a/docs/UX Patterns/Table/Cell Tag.mdx +++ /dev/null @@ -1,27 +0,0 @@ -import { Meta, Story } from '@storybook/blocks' - -import * as TableStories from './Table.stories' - - - -# Cell Tag - -### Tags in Tables - -#### Overview - -Tags are used within tables to visually categorize or label data, providing users with quick context about specific rows or items. Tags can indicate statuses, categories, priorities, or any other metadata that helps users understand and interpret the data at a glance. - -#### Managing Tags - -- **Creating Tags - COMING SOON** -- **Editing Tags - COMING SOON** -- **Deleting Tags - COMING SOON** - -#### Displaying Tags within Tables - -COMING SOON - -#### Filtering by Tags - -COMING SOON diff --git a/docs/UX Patterns/Table/Cell Text.mdx b/docs/UX Patterns/Table/Cell Text.mdx new file mode 100644 index 000000000..cfe9eca52 --- /dev/null +++ b/docs/UX Patterns/Table/Cell Text.mdx @@ -0,0 +1,27 @@ +import { Meta, Story } from '@storybook/blocks' + +import * as TableStories from './Table.stories' + + + +# Table Cells + +### 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. diff --git a/docs/UX Patterns/Table/Date and Time.mdx b/docs/UX Patterns/Table/Date and Time.mdx new file mode 100644 index 000000000..c22ebe327 --- /dev/null +++ b/docs/UX Patterns/Table/Date and Time.mdx @@ -0,0 +1,29 @@ +import { Meta, Story } from '@storybook/blocks' + +import * as TableStories from './Table.stories' + + + +# Table Cells + +### 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. diff --git a/docs/UX Patterns/Table/Table.mdx b/docs/UX Patterns/Table/Table.mdx index e284b16c6..33b0c813e 100644 --- a/docs/UX Patterns/Table/Table.mdx +++ b/docs/UX Patterns/Table/Table.mdx @@ -35,11 +35,10 @@ Use pagination in tables to improve performance and reduce load times by fetchin Table cells support various formats and are designed to display data in clear, readable ways. -- Numbers (Coming Soon) - Date / Time (Coming Soon) +- Text - CTA Buttons (Coming Soon) -- Status Badges (Coming Soon) -- Links (Coming Soon) +- Status (Coming Soon) - Tags (Coming Soon) - More Actions (Coming Soon) From e69303c3873c05600b8e212d013e7ebfdc5f6bc2 Mon Sep 17 00:00:00 2001 From: Gabriel Tiburcio Date: Tue, 22 Oct 2024 15:57:17 -0300 Subject: [PATCH 7/7] docs: change error color for table badge component --- docs/UX Patterns/Table/Table.stories.tsx | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/docs/UX Patterns/Table/Table.stories.tsx b/docs/UX Patterns/Table/Table.stories.tsx index 208a9adb9..bb0f6eb45 100644 --- a/docs/UX Patterns/Table/Table.stories.tsx +++ b/docs/UX Patterns/Table/Table.stories.tsx @@ -18,7 +18,7 @@ import { Tooltip, } from 'src/components' import { DatePickerWithDisabledYears } from 'src/components/data-entry/DatePicker/DatePicker.stories' -import { ColorPrimary, ColorSuccess, ColorTextPlaceholder } from 'src/styles/style' +import { ColorError, ColorSuccess, ColorTextPlaceholder } from 'src/styles/style' interface DataType { key: string @@ -50,7 +50,7 @@ const getNameForEnvironment = (env: Environment) => EnvironmentNames[env] const StatusColors: Record = { draft: ColorTextPlaceholder, - error: ColorPrimary, + error: ColorError, ready: ColorSuccess, } @@ -153,7 +153,19 @@ const columns: TableProps['columns'] = [ value={null} options={[ { label: 'Option 1', value: 'option1' }, - { label: 'Option 2', value: 'option2' }, + { + label: ( + + Option 2 + + ), + value: 'option2', + disabled: true, + }, + { + label: Delete, + value: 'option2', + }, ]} /> ),