From 8c7132e8c62ca0d3cd6dd3dcc1b03b45b82e2de2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gabriel=20Tib=C3=BArcio?= Date: Wed, 23 Oct 2024 13:08:56 -0300 Subject: [PATCH] docs: table docs basic example (#459) --- .storybook/preview.tsx | 2 +- .../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/Directory.mdx | 3 - docs/UX Patterns/Table/Cell Badge.mdx | 1 - docs/UX Patterns/Table/Cell CTA.mdx | 7 + docs/UX Patterns/Table/Cell Link.mdx | 24 +- docs/UX Patterns/Table/Cell More Actions.mdx | 15 +- docs/UX Patterns/Table/Cell Status.mdx | 23 ++ docs/UX Patterns/Table/Cell Tag.mdx | 1 - docs/UX Patterns/Table/Cell Text.mdx | 27 ++ docs/UX Patterns/Table/Date and Time.mdx | 29 ++ docs/UX Patterns/Table/Filters.mdx | 29 +- docs/UX Patterns/Table/Filters.stories.tsx | 278 ++++++++++++++++++ .../Table/{Documentation.mdx => Table.mdx} | 57 ++-- docs/UX Patterns/Table/Table.stories.tsx | 256 ++++++++++++---- docs/UX Patterns/Table/Tags.mdx | 17 -- .../data-display/Table/Table.stories.tsx | 103 ------- src/components/data-display/Tag/Tag.tsx | 6 +- .../DatePicker/DatePicker.stories.tsx | 2 +- tsconfig.json | 5 +- vite.config.js | 3 +- 29 files changed, 657 insertions(+), 338 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 docs/UX Patterns/Directory.mdx delete mode 100644 docs/UX Patterns/Table/Cell Badge.mdx create mode 100644 docs/UX Patterns/Table/Cell CTA.mdx 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 create mode 100644 docs/UX Patterns/Table/Filters.stories.tsx rename docs/UX Patterns/Table/{Documentation.mdx => Table.mdx} (53%) delete mode 100644 docs/UX Patterns/Table/Tags.mdx delete mode 100644 src/components/data-display/Table/Table.stories.tsx diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 98481a2d0..f82951939 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -38,7 +38,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/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/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 deleted file mode 100644 index 8b1378917..000000000 --- a/docs/UX Patterns/Table/Cell Badge.mdx +++ /dev/null @@ -1 +0,0 @@ - diff --git a/docs/UX Patterns/Table/Cell CTA.mdx b/docs/UX Patterns/Table/Cell CTA.mdx new file mode 100644 index 000000000..19c5be73f --- /dev/null +++ b/docs/UX Patterns/Table/Cell CTA.mdx @@ -0,0 +1,7 @@ +import { Meta, Story } from '@storybook/blocks' + +import * as TableStories from './Table.stories' + + + +# Cell CTA diff --git a/docs/UX Patterns/Table/Cell Link.mdx b/docs/UX Patterns/Table/Cell Link.mdx index ad9acf92a..78f217591 100644 --- a/docs/UX Patterns/Table/Cell Link.mdx +++ b/docs/UX Patterns/Table/Cell Link.mdx @@ -1 +1,23 @@ -![](../../assets/test.png) +import { Meta, Story } from '@storybook/blocks' + +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 15b9950cb..95a8e2f59 100644 --- a/docs/UX Patterns/Table/Cell More Actions.mdx +++ b/docs/UX Patterns/Table/Cell More Actions.mdx @@ -1,18 +1,21 @@ -### 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' - + +# 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) +#### 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 8b1378917..000000000 --- a/docs/UX Patterns/Table/Cell Tag.mdx +++ /dev/null @@ -1 +0,0 @@ - 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/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 53% rename from docs/UX Patterns/Table/Documentation.mdx rename to docs/UX Patterns/Table/Table.mdx index bf8c4ec9a..33b0c813e 100644 --- a/docs/UX Patterns/Table/Documentation.mdx +++ b/docs/UX Patterns/Table/Table.mdx @@ -1,37 +1,51 @@ -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 +Bug in More Actions +Move Header, Pagination and Cell Types to the top + +
+ +### 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) +- Text - CTA Buttons (Coming Soon) -- Status Badges (Coming Soon) -- Links (Coming Soon) +- Status (Coming Soon) - Tags (Coming Soon) - More Actions (Coming Soon) [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 +53,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..bb0f6eb45 100644 --- a/docs/UX Patterns/Table/Table.stories.tsx +++ b/docs/UX Patterns/Table/Table.stories.tsx @@ -1,94 +1,230 @@ -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' +import { ColorError, ColorSuccess, ColorTextPlaceholder } from 'src/styles/style' 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 = 'development' | 'production' +type Status = 'draft' | 'error' | 'ready' + +const EnvironmentColors: Record = { + production: 'blue', + development: 'purple', +} + +const EnvironmentNames: Record = { + production: 'Prod', + development: 'Dev', +} + +const getTagColorForEnvironment = (env: Environment): ITagProps['color'] => EnvironmentColors[env] + +const getNameForEnvironment = (env: Environment) => EnvironmentNames[env] + +const StatusColors: Record = { + draft: ColorTextPlaceholder, + error: ColorError, + ready: ColorSuccess, +} + +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: () => ( + + ID + + Help lorem ipsum. + + Learn More + + + }> + + + + ), + 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/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 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 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', }, },