Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: complex table filters example #489

Merged
merged 4 commits into from
Nov 13, 2024
Merged

Conversation

tibuurcio
Copy link
Collaborator

@tibuurcio tibuurcio commented Nov 12, 2024

Summary

Documentation work and a change to an ESLint rule.

This PR brings the Observability complex filters implementation in a simplified version as to showcase an example of complex table filters to be used in the library.

New structure:

image

Testing Plan

  • Was this tested locally? If not, explain why.

Reference Issue (For mParticle employees only. Ignore if you are an outside contributor)

@tibuurcio tibuurcio requested a review from gabyzif November 12, 2024 14:47
Copy link

github-actions bot commented Nov 12, 2024

PR Preview Action v1.4.8
Preview removed because the pull request was closed.
2024-11-13 18:05 UTC

@@ -38,7 +38,7 @@ const preview: Preview = {
],
'Candidate Components',
'UX Patterns',
['Table', ['Table', 'Filters']],
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This sorting is not working when taking stories into consideration. Need to dig deeper to understand why.

} from 'src/components'
import { DatePickerWithDisabledYears } from 'src/components/data-entry/DatePicker/DatePicker.stories'
import { SelectWithRangePicker } from 'docs/Candidate Components/Directory/Date Range Filter/SelectWithRangePicker'

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extracted everything table related that would be re-used into TableStoryUtils.tsx

@tibuurcio tibuurcio marked this pull request as draft November 12, 2024 14:58

const preview: Preview = {
parameters: {
layout: 'centered',
options: {
// TODO https://mparticle-eng.atlassian.net/browse/UNI-1214
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tried implementing this on this PR but it's more complex than I was expecting, to pulled it out.

@@ -0,0 +1,201 @@
import type { ReactNode } from 'react'
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Essencially pulled from Observability example, but kept everything in a single file and simplified a lot of it. No logic included, only UI.

@@ -1,5 +1,5 @@
import { Collapse as AntCollapse } from 'antd'
import { type CollapseProps as AntCollapseProps } from 'antd'
import type { CollapseProps as AntCollapseProps } from 'antd'
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggested by eslint

@tibuurcio tibuurcio marked this pull request as ready for review November 13, 2024 17:30
@tibuurcio tibuurcio merged commit a5afe30 into main Nov 13, 2024
9 checks passed
@mparticle-automation
Copy link
Collaborator

🎉 This PR is included in version 1.35.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants