Skip to content

Commit 236a10e

Browse files
bminglesbmingles
authored
refactor: SampleSection component to conditionally render based on route (#2000)
SampleSection component is now responsible for rendering / not rendering based on route. Contrast to before where we rendered everything and then hid via css. Seems to cut time to run styleguide tests by more than half locally. <img width="455" alt="image" src="https://github.com/deephaven/web-client-ui/assets/1900643/b8b5826a-ae99-413e-8dfe-c3c93dd54c6a">
1 parent 34d6472 commit 236a10e

31 files changed

Lines changed: 231 additions & 194 deletions

‎packages/code-studio/src/styleguide/Buttons.tsx‎

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
/* eslint-disable react/jsx-props-no-spreading */
21
import React, { Component, ReactElement } from 'react';
32
import { Button, SocketedButton, Flex } from '@deephaven/components';
43

54
import { dhTruck } from '@deephaven/icons';
6-
import { sampleSectionIdAndClasses } from './utils';
5+
import SampleSection from './SampleSection';
76

87
function noOp(): void {
98
return undefined;
@@ -17,10 +16,7 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
1716
return (
1817
<>
1918
<h5>Button Kinds</h5>
20-
<div
21-
{...sampleSectionIdAndClasses('buttons-regular')}
22-
style={{ padding: '1rem 0' }}
23-
>
19+
<SampleSection name="buttons-regular" style={{ padding: '1rem 0' }}>
2420
<Flex gap="size-100">
2521
<Button kind="primary" onClick={noOp}>
2622
Primary
@@ -44,7 +40,7 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
4440
Ghost
4541
</Button>
4642
</Flex>
47-
</div>
43+
</SampleSection>
4844
</>
4945
);
5046
}
@@ -60,10 +56,7 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
6056
};
6157

6258
return (
63-
<div
64-
{...sampleSectionIdAndClasses('links')}
65-
style={{ paddingTop: '1rem' }}
66-
>
59+
<SampleSection name="links" style={{ paddingTop: '1rem' }}>
6760
<h5>Links</h5>
6861
<Flex gap="1rem">
6962
{Object.entries(levelMap).map(([level, semantic]) => (
@@ -73,13 +66,13 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
7366
</a>
7467
))}
7568
</Flex>
76-
</div>
69+
</SampleSection>
7770
);
7871
}
7972

8073
static renderSocketedButtons(): ReactElement {
8174
return (
82-
<div {...sampleSectionIdAndClasses('buttons-socketed')}>
75+
<SampleSection name="buttons-socketed">
8376
<h5>Socketed Buttons (for linker)</h5>
8477
<SocketedButton
8578
style={{ marginBottom: '1rem', marginRight: '1rem' }}
@@ -116,7 +109,7 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
116109
>
117110
Disabled
118111
</SocketedButton>
119-
</div>
112+
</SampleSection>
120113
);
121114
}
122115

@@ -132,10 +125,7 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
132125
const { toggle } = this.state;
133126

134127
return (
135-
<div
136-
{...sampleSectionIdAndClasses('buttons-inline')}
137-
style={{ padding: '1rem 0' }}
138-
>
128+
<SampleSection name="buttons-inline" style={{ padding: '1rem 0' }}>
139129
<h5>Inline Buttons</h5>
140130
Regular btn-inline:
141131
<Button
@@ -176,7 +166,7 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
176166
<Button kind="ghost" icon={dhTruck} onClick={noOp}>
177167
Text Button
178168
</Button>
179-
</div>
169+
</SampleSection>
180170
);
181171
}
182172

‎packages/code-studio/src/styleguide/Charts.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
1-
/* eslint-disable react/jsx-props-no-spreading */
21
import React, { ReactElement, useState } from 'react';
32
import { Chart, ChartModel, MockChartModel } from '@deephaven/chart';
43
import { useApi } from '@deephaven/jsapi-bootstrap';
5-
import {
6-
sampleSectionIdAndClasses,
7-
useSeededRandomNumberCallback,
8-
} from './utils';
4+
import { useSeededRandomNumberCallback } from './utils';
5+
import SampleSection from './SampleSection';
96

107
function Charts(): ReactElement {
118
const dh = useApi();
@@ -15,12 +12,12 @@ function Charts(): ReactElement {
1512
const [model] = useState(() => new MockChartModel(dh));
1613

1714
return (
18-
<div {...sampleSectionIdAndClasses('charts')}>
15+
<SampleSection name="charts">
1916
<h2 className="ui-title">Chart</h2>
2017
<div style={{ height: 500 }}>
2118
<Chart model={model as ChartModel} />
2219
</div>
23-
</div>
20+
</SampleSection>
2421
);
2522
}
2623

‎packages/code-studio/src/styleguide/Colors.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
/* eslint-disable react/jsx-props-no-spreading */
21
import React from 'react';
32
import classNames from 'classnames';
4-
import { sampleSectionIdAndClasses } from './utils';
53
import { Swatch } from './Swatch';
4+
import SampleSection from './SampleSection';
65

76
function Colors(): React.ReactElement {
87
const graySwatches = [
@@ -61,7 +60,7 @@ function Colors(): React.ReactElement {
6160
));
6261

6362
return (
64-
<div {...sampleSectionIdAndClasses('colors')}>
63+
<SampleSection name="colors">
6564
<h2 className="ui-title">Colors</h2>
6665
<div className="row">
6766
<div className="col">
@@ -79,7 +78,7 @@ function Colors(): React.ReactElement {
7978
</p>
8079
</div>
8180
</div>
82-
</div>
81+
</SampleSection>
8382
);
8483
}
8584

‎packages/code-studio/src/styleguide/ContextMenus.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/* eslint-disable react/jsx-props-no-spreading */
21
/* eslint no-alert: "off" */
32
/* eslint no-console: "off" */
43
import React, { Component } from 'react';
@@ -16,7 +15,7 @@ import {
1615
vsQuestion,
1716
IconDefinition,
1817
} from '@deephaven/icons';
19-
import { sampleSectionIdAndClasses } from './utils';
18+
import SampleSection from './SampleSection';
2019

2120
interface ContextMenuItem {
2221
title: string;
@@ -108,7 +107,7 @@ class ContextMenus extends Component {
108107
});
109108

110109
return (
111-
<div {...sampleSectionIdAndClasses('context-menus')}>
110+
<SampleSection name="context-menus">
112111
<h2 className="ui-title">Context Menu</h2>
113112
<Button
114113
kind="primary"
@@ -134,7 +133,7 @@ class ContextMenus extends Component {
134133
Right Click Me
135134
<ContextActions actions={delayedActions} />
136135
</Button>
137-
</div>
136+
</SampleSection>
138137
);
139138
}
140139
}

‎packages/code-studio/src/styleguide/Dialog.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/* eslint-disable react/jsx-props-no-spreading */
21
/* eslint no-alert: "off" */
32
/* eslint no-console: "off" */
43
import React, { Component } from 'react';
@@ -8,7 +7,7 @@ import {
87
HierarchicalCheckboxValueMap,
98
Button,
109
} from '@deephaven/components';
11-
import { sampleSectionIdAndClasses } from './utils';
10+
import SampleSection from './SampleSection';
1211

1312
interface DialogState {
1413
isShown: boolean;
@@ -89,7 +88,7 @@ class Dialog extends Component<unknown, DialogState> {
8988
const { isShown, checkBoxMap } = this.state;
9089

9190
return (
92-
<div {...sampleSectionIdAndClasses('dialog')}>
91+
<SampleSection name="dialog">
9392
<h2 className="ui-title">Popover Dialog</h2>
9493
<p>
9594
Popover dialog that can contain interactive elements, can be set to
@@ -136,7 +135,7 @@ class Dialog extends Component<unknown, DialogState> {
136135
valueMap={checkBoxMap}
137136
onUpdateValueMap={this.handleUpdateCheckboxMap}
138137
/>
139-
</div>
138+
</SampleSection>
140139
);
141140
}
142141
}

‎packages/code-studio/src/styleguide/DraggableLists.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/* eslint-disable react/jsx-props-no-spreading */
21
/* eslint no-console: "off" */
32
import React, { Component } from 'react';
43
import {
@@ -10,7 +9,7 @@ import {
109
import memoize from 'memoizee';
1110
import { DragUtils, DraggableItemList, Range } from '@deephaven/components';
1211
import DraggableListInput from './DraggableListInput';
13-
import { sampleSectionIdAndClasses } from './utils';
12+
import SampleSection from './SampleSection';
1413

1514
const DRAG_LIST_TITLES = ['Draggable Only', 'Drag and Drop', 'Droppable Only'];
1615
const DRAG_LIST_PROPS = [
@@ -190,11 +189,7 @@ class DraggableLists extends Component<
190189
render(): React.ReactElement {
191190
const { items, lists, selectedRanges } = this.state;
192191
return (
193-
<div
194-
{...sampleSectionIdAndClasses('draggable-lists', [
195-
'style-guide-inputs',
196-
])}
197-
>
192+
<SampleSection name="draggable-lists" className="style-guide-inputs">
198193
<h2 className="ui-title">Drag and Drop Lists</h2>
199194
<div className="row">
200195
<DragDropContext
@@ -219,7 +214,7 @@ class DraggableLists extends Component<
219214
))}
220215
</DragDropContext>
221216
</div>
222-
</div>
217+
</SampleSection>
223218
);
224219
}
225220
}

‎packages/code-studio/src/styleguide/DropdownMenus.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/* eslint-disable react/jsx-props-no-spreading */
21
/* eslint no-alert: "off" */
32
/* eslint no-console: "off" */
43
import React, { Component } from 'react';
@@ -18,7 +17,7 @@ import {
1817
vsKebabVertical,
1918
vsQuestion,
2019
} from '@deephaven/icons';
21-
import { sampleSectionIdAndClasses } from './utils';
20+
import SampleSection from './SampleSection';
2221

2322
interface DropdownMenus {
2423
button: React.RefObject<HTMLDivElement>;
@@ -92,7 +91,7 @@ class DropdownMenus extends Component<
9291
const { isShown } = this.state;
9392

9493
return (
95-
<div {...sampleSectionIdAndClasses('dropdown-menus')}>
94+
<SampleSection name="dropdown-menus">
9695
<h2 className="ui-title">Dropdown Menu</h2>
9796
<p>
9897
A simple dropdown menu of actions, can open on click of parent
@@ -136,7 +135,7 @@ class DropdownMenus extends Component<
136135
actions={actions}
137136
/>
138137
</div>
139-
</div>
138+
</SampleSection>
140139
);
141140
}
142141
}

‎packages/code-studio/src/styleguide/Editors.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
/* eslint-disable react/jsx-props-no-spreading */
21
import React from 'react';
32
import { Editor } from '@deephaven/console';
43
import Constants from './StyleConstants';
5-
import { sampleSectionIdAndClasses } from './utils';
4+
import SampleSection from './SampleSection';
65

76
function Editors(): React.ReactElement {
87
return (
9-
<div {...sampleSectionIdAndClasses('editors')}>
8+
<SampleSection name="editors">
109
<h2 className="ui-title">Editor</h2>
1110
<h5 className="sub-title">Python</h5>
1211
<div style={{ height: 400, position: 'relative' }}>
@@ -20,7 +19,7 @@ function Editors(): React.ReactElement {
2019
settings={{ language: 'groovy', value: Constants.testGroovy }}
2120
/>
2221
</div>
23-
</div>
22+
</SampleSection>
2423
);
2524
}
2625

‎packages/code-studio/src/styleguide/ErrorViews.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
/* eslint-disable react/jsx-props-no-spreading */
21
/* eslint no-alert: "off" */
32
import React, { CSSProperties } from 'react';
43
import { ErrorView } from '@deephaven/components';
5-
import { sampleSectionIdAndClasses } from './utils';
4+
import SampleSection from './SampleSection';
65

76
function ErrorViews(): React.ReactElement {
87
const columnStyle: CSSProperties = {
@@ -20,7 +19,7 @@ function ErrorViews(): React.ReactElement {
2019
const longErrorType = 'SuperLongErrorMessageType';
2120

2221
return (
23-
<div {...sampleSectionIdAndClasses('error-views')}>
22+
<SampleSection name="error-views">
2423
<h2 className="ui-title" title="Display error messages easily">
2524
Error Views
2625
</h2>
@@ -52,7 +51,7 @@ function ErrorViews(): React.ReactElement {
5251
/>
5352
</div>
5453
</div>
55-
</div>
54+
</SampleSection>
5655
);
5756
}
5857

‎packages/code-studio/src/styleguide/GoldenLayout.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
/* eslint-disable react/jsx-props-no-spreading */
21
import React from 'react';
32
import classnames from 'classnames';
4-
import { sampleSectionIdAndClasses } from './utils';
3+
import SampleSection from './SampleSection';
54

65
const tabs = ['Tab 1', 'Tab 2', 'Tab 3'];
76

@@ -23,7 +22,7 @@ function Tab({
2322

2423
export function GoldenLayout(): JSX.Element {
2524
return (
26-
<div {...sampleSectionIdAndClasses('golden-layout')}>
25+
<SampleSection name="golden-layout">
2726
<h2 className="ui-title">Golden Layout</h2>
2827
{[false, true].map(isMaximised => (
2928
<React.Fragment key={String(isMaximised)}>
@@ -50,7 +49,7 @@ export function GoldenLayout(): JSX.Element {
5049
</div>
5150
</React.Fragment>
5251
))}
53-
</div>
52+
</SampleSection>
5453
);
5554
}
5655

0 commit comments

Comments
 (0)
⚡