-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: update visualizer to support v3 (#18)
- Loading branch information
Showing
23 changed files
with
1,965 additions
and
2,214 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,25 @@ | ||
| import type { Preview } from '@storybook/react'; | ||
| import type { Preview } from '@storybook/react' | ||
| // import type { IndexEntry } from '@storybook/types'; | ||
|
|
||
| const preview: Preview = { | ||
| parameters: { | ||
| actions: { argTypesRegex: "^on[A-Z].*" }, | ||
| actions: { argTypesRegex: '^on[A-Z].*' }, | ||
| layout: 'fullscreen', | ||
| options: { | ||
| // a and b are of type IndexEntry, but adding the type annotations generates a syntax warning in the console for some reason | ||
| storySort: (a, b) => { | ||
| if (a.title.includes('Visualizer')) return -1 | ||
| if (b.title.includes('Visualizer')) return 1 | ||
| return 0 | ||
| } | ||
| }, | ||
| }, | ||
| controls: { | ||
| matchers: { | ||
| color: /(background|color)$/i, | ||
| date: /Date$/, | ||
| }, | ||
| }, | ||
| } | ||
| }, | ||
| } | ||
|
|
||
| export default preview | ||
| export default preview |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| - When there are multiple overlaying spans on one lane, add a little "+" button to expand the spans into separate lanes. The "+" button should be replaced with a "-" button when clicked, and when clicked again, it will collapse the spans within that lane. | ||
| - Show computed render spans | ||
| - Create a custom fetch instrumentation, DD is unreliable |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| /* eslint-disable import/no-extraneous-dependencies */ | ||
| import React from 'react' | ||
| import styled from 'styled-components' | ||
| import { ToggleButton } from '@zendeskgarden/react-buttons' | ||
| import { Grid } from '@zendeskgarden/react-grid' | ||
| import { Tooltip } from '@zendeskgarden/react-tooltips' | ||
| import { FILTER_OPTIONS, FilterOption } from '../constants' | ||
| import { Card, CardContent } from './styled/Card' | ||
|
|
||
| const FilterContainer = styled(Card)` | ||
| min-width: 300px; | ||
| ` | ||
|
|
||
| const ButtonGroup = styled.div` | ||
| display: flex; | ||
| gap: ${(props) => props.theme.space.sm}; | ||
| flex-wrap: wrap; | ||
| ` | ||
|
|
||
| interface FilterGroupProps { | ||
| state: Record<string, boolean> | ||
| setState: React.Dispatch<React.SetStateAction<Record<FilterOption, boolean>>> | ||
| } | ||
|
|
||
| export const FilterGroup: React.FC<FilterGroupProps> = ({ | ||
| state, | ||
| setState, | ||
| }) => ( | ||
| <FilterContainer> | ||
| <CardContent> | ||
| <Grid.Row> | ||
| <Grid.Col> | ||
| <ButtonGroup> | ||
| {FILTER_OPTIONS.map((option) => ( | ||
| <Tooltip key={option} content={option}> | ||
| <ToggleButton | ||
| isPressed={state[option]} | ||
| onClick={() => | ||
| void setState((prev) => ({ | ||
| ...prev, | ||
| [option]: !prev[option], | ||
| })) | ||
| } | ||
| > | ||
| {option} | ||
| </ToggleButton> | ||
| </Tooltip> | ||
| ))} | ||
| </ButtonGroup> | ||
| </Grid.Col> | ||
| </Grid.Row> | ||
| </CardContent> | ||
| </FilterContainer> | ||
| ) |
Oops, something went wrong.