Skip to content

Commit

Permalink
test: update styleguide to isolate by state
Browse files Browse the repository at this point in the history
  • Loading branch information
@wusteven815
wusteven815 committed Apr 26, 2024
1 parent c6bcc15 commit 78fe14d
Show file tree
Hide file tree
Showing 17 changed files with 397 additions and 300 deletions.
23 changes: 13 additions & 10 deletions packages/code-studio/src/styleguide/Buttons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React, { Component, ReactElement } from 'react';
import { Flex } from '@adobe/react-spectrum';
import { Button, ButtonOld, SocketedButton } from '@deephaven/components';
import { dhTruck } from '@deephaven/icons';
import { sampleSectionIdAndClasses } from './utils';
import { IsHashProp, sampleSectionIdAndClasses } from './utils';

function noOp(): void {
return undefined;
Expand All @@ -12,7 +12,7 @@ function noOp(): void {
interface ButtonsState {
toggle: boolean;
}
class Buttons extends Component<Record<string, never>, ButtonsState> {
class Buttons extends Component<IsHashProp, ButtonsState> {
static renderButtonBrand(type: string, brand: string): ReactElement {
const className = type.length ? `btn-${type}-${brand}` : `btn-${brand}`;
return (
Expand Down Expand Up @@ -123,7 +123,7 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
);
}

constructor(props: Record<string, never>) {
constructor(props: IsHashProp) {
super(props);

this.state = {
Expand Down Expand Up @@ -183,20 +183,23 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
);
}

render(): React.ReactElement {
const buttons = ['', 'outline'].map(type => Buttons.renderButtons(type));
render(): React.ReactNode {
const { isHash } = this.props;
const buttonsRegular = Buttons.renderButtons('');
const buttonsOutline = Buttons.renderButtons('outline');
const inlineButtons = this.renderInlineButtons();
const socketedButtons = Buttons.renderSocketedButtons();
const links = Buttons.renderLinks();

return (
<div>
<h2 className="ui-title">Buttons</h2>
{isHash('') && <h2 className="ui-title">Buttons</h2>}
<div style={{ padding: '1rem 0' }}>
{buttons}
{inlineButtons}
{socketedButtons}
{links}
{isHash('buttons-regular') && buttonsRegular}
{isHash('buttons-outline') && buttonsOutline}
{isHash('buttons-inline') && inlineButtons}
{isHash('buttons-socketed') && socketedButtons}
{isHash('links') && links}
</div>
</div>
);
Expand Down
116 changes: 72 additions & 44 deletions packages/code-studio/src/styleguide/Grids.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@ import QuadrillionExample from './grid-examples/QuadrillionExample';
import TreeExample from './grid-examples/TreeExample';
import AsyncExample from './grid-examples/AsyncExample';
import DataBarExample from './grid-examples/DataBarExample';
import { sampleSectionIdAndClassesSpectrum } from './utils';
import { IsHashProp, sampleSectionIdAndClassesSpectrum } from './utils';

function Grids(): ReactElement {
function Grids({ isHash }: IsHashProp): ReactElement {
const dh = useApi();
const [irisGridModel] = useState(
new MockIrisGridTreeModel(dh, new MockTreeGridModel())
Expand All @@ -39,48 +39,76 @@ function Grids(): ReactElement {
return (
<div>
<ThemeContext.Provider value={contextTheme}>
<h2 className="ui-title">Grid</h2>
<Flex {...sampleSectionIdAndClassesSpectrum('grids-grid')}>
<Grid model={model} theme={theme} />
</Flex>
<h2 className="ui-title">Static Data</h2>
<Flex
{...sampleSectionIdAndClassesSpectrum('grids-static')}
height={200}
>
<StaticExample />
</Flex>
<h2 className="ui-title">Data Bar</h2>
<Flex
{...sampleSectionIdAndClassesSpectrum('grids-data-bar')}
height={500}
>
<DataBarExample />
</Flex>
<h2 className="ui-title">Quadrillion rows and columns</h2>
<Flex
{...sampleSectionIdAndClassesSpectrum('grids-quadrillion')}
position="relative"
height={500}
>
<QuadrillionExample />
</Flex>
<h2 className="ui-title">Async example</h2>
<Flex
{...sampleSectionIdAndClassesSpectrum('grids-async')}
position="relative"
height={500}
>
<AsyncExample />
</Flex>
<h2 className="ui-title">Tree Grid</h2>
<Flex {...sampleSectionIdAndClassesSpectrum('grids-tree')} height={500}>
<TreeExample />
</Flex>
<h2 className="ui-title">Iris Grid</h2>
<Flex {...sampleSectionIdAndClassesSpectrum('grids-iris')} height={500}>
<IrisGrid model={irisGridModel} />
</Flex>
{isHash('' && <h2 className="ui-title">Grid</h2>)}
{isHash('grids-grid') && (
<Flex {...sampleSectionIdAndClassesSpectrum('grids-grid')}>
<Grid model={model} theme={theme} />
</Flex>
)}

{isHash('' && <h2 className="ui-title">Static Data</h2>)}
{isHash('grids-static') && (
<Flex
{...sampleSectionIdAndClassesSpectrum('grids-static')}
height={200}
>
<StaticExample />
</Flex>
)}

{isHash('' && <h2 className="ui-title">Data Bar</h2>)}
{isHash('grids-data-bar') && (
<Flex
{...sampleSectionIdAndClassesSpectrum('grids-data-bar')}
height={500}
>
<DataBarExample />
</Flex>
)}

{isHash(
'' && <h2 className="ui-title">Quadrillion rows and columns</h2>
)}
{isHash('grids-quadrillion') && (
<Flex
{...sampleSectionIdAndClassesSpectrum('grids-quadrillion')}
position="relative"
height={500}
>
<QuadrillionExample />
</Flex>
)}

{isHash('' && <h2 className="ui-title">Async example</h2>)}
{isHash('grids-async') && (
<Flex
{...sampleSectionIdAndClassesSpectrum('grids-async')}
position="relative"
height={500}
>
<AsyncExample />
</Flex>
)}

{isHash('' && <h2 className="ui-title">Tree Grid</h2>)}
{isHash('grids-tree') && (
<Flex
{...sampleSectionIdAndClassesSpectrum('grids-tree')}
height={500}
>
<TreeExample />
</Flex>
)}

{isHash('' && <h2 className="ui-title">Iris Grid</h2>)}
{isHash('grids-iris') && (
<Flex
{...sampleSectionIdAndClassesSpectrum('grids-iris')}
height={500}
>
<IrisGrid model={irisGridModel} />
</Flex>
)}
</ThemeContext.Provider>
</div>
);
Expand Down
21 changes: 16 additions & 5 deletions packages/code-studio/src/styleguide/Navigations.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,20 +130,31 @@ function makeMenuItem(
function makeMenuItems(
submenuCount: number = getRandomCount(),
pageCount: number = getRandomCount(),
switchCount: number = getRandomCount()
switchCount: number = getRandomCount(),
presetId = false
): MenuItem[] {
const items: MenuItem[] = [];
let customId = 0;

for (let i = 0; i < submenuCount; i += 1) {
items.push(makeMenuItem(MENU_ITEM_TYPE.SUBMENU));
items.push(
makeMenuItem(MENU_ITEM_TYPE.SUBMENU, presetId ? customId : undefined)
);
customId += 1;
}

for (let i = 0; i < pageCount; i += 1) {
items.push(makeMenuItem(MENU_ITEM_TYPE.PAGE));
items.push(
makeMenuItem(MENU_ITEM_TYPE.PAGE, presetId ? customId : undefined)
);
customId += 1;
}

for (let i = 0; i < switchCount; i += 1) {
items.push(makeMenuItem(MENU_ITEM_TYPE.SWITCH));
items.push(
makeMenuItem(MENU_ITEM_TYPE.SWITCH, presetId ? customId : undefined)
);
customId += 1;
}

return items;
Expand Down Expand Up @@ -236,7 +247,7 @@ function Navigations(): JSX.Element {
setStackItems([
{
title: 'Navigation Menu',
items: makeMenuItems(),
items: makeMenuItems(1, 2, 5, true),
},
]);
}, []);
Expand Down
124 changes: 72 additions & 52 deletions packages/code-studio/src/styleguide/SpectrumComponents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,62 +38,82 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { dhTruck, vsEmptyWindow } from '@deephaven/icons';
import { Heading, View, Text } from '@deephaven/components';
import { SPECTRUM_COMPONENT_SAMPLES_ID } from './constants';
import { sampleSectionIdAndClassesSpectrum } from './utils';
import { IsHashProp, sampleSectionIdAndClassesSpectrum } from './utils';

export function SpectrumComponents(): JSX.Element {
export function SpectrumComponents({ isHash }: IsHashProp): JSX.Element {
return (
<div id={SPECTRUM_COMPONENT_SAMPLES_ID}>
<h2 className="ui-title" data-no-menu>
Spectrum Components
</h2>
{isHash('') && (
<h2 className="ui-title" data-no-menu>
Spectrum Components
</h2>
)}

<Grid gap={20} columns={minmax('0px', '1fr')}>
<View {...sampleSectionIdAndClassesSpectrum('spectrum-buttons')}>
<h3>Buttons</h3>
<ButtonsSample />
</View>
<View {...sampleSectionIdAndClassesSpectrum('spectrum-collections')}>
<h3>Collections</h3>
<TableViewSample />
</View>
<View {...sampleSectionIdAndClassesSpectrum('spectrum-content')}>
<h3>Content</h3>
<IllustratedMessageSample />
</View>
<View {...sampleSectionIdAndClassesSpectrum('spectrum-forms')}>
<h3>Forms</h3>
<FormsSample />
</View>
<View {...sampleSectionIdAndClassesSpectrum('spectrum-overlays')}>
<h3>Overlays</h3>
<Flex gap="size-160">
<ContextualHelpSample />
<DialogTrigger>
<ActionButton>Dialog Trigger</ActionButton>
{close => (
<Dialog>
<Heading>Some Heading</Heading>
<Header>Some Header</Header>
<Divider />
<Content>
<Text>Are you sure?</Text>
</Content>
<ButtonGroup>
<Button variant="secondary" onPress={close}>
Cancel
</Button>
<Button variant="accent" onPress={close}>
Confirm
</Button>
</ButtonGroup>
</Dialog>
)}
</DialogTrigger>
</Flex>
</View>
<View {...sampleSectionIdAndClassesSpectrum('spectrum-well')}>
<h3>Wells</h3>
<Well>This is a well.</Well>
</View>
{isHash('spectrum-buttons') && (
<View {...sampleSectionIdAndClassesSpectrum('spectrum-buttons')}>
<h3>Buttons</h3>
<ButtonsSample />
</View>
)}

{isHash('spectrum-collections') && (
<View {...sampleSectionIdAndClassesSpectrum('spectrum-collections')}>
<h3>Collections</h3>
<TableViewSample />
</View>
)}

{isHash('spectrum-content') && (
<View {...sampleSectionIdAndClassesSpectrum('spectrum-content')}>
<h3>Content</h3>
<IllustratedMessageSample />
</View>
)}

{isHash('spectrum-forms') && (
<View {...sampleSectionIdAndClassesSpectrum('spectrum-forms')}>
<h3>Forms</h3>
<FormsSample />
</View>
)}

{isHash('spectrum-overlays') && (
<View {...sampleSectionIdAndClassesSpectrum('spectrum-overlays')}>
<h3>Overlays</h3>
<Flex gap="size-160">
<ContextualHelpSample />
<DialogTrigger>
<ActionButton>Dialog Trigger</ActionButton>
{close => (
<Dialog>
<Heading>Some Heading</Heading>
<Header>Some Header</Header>
<Divider />
<Content>
<Text>Are you sure?</Text>
</Content>
<ButtonGroup>
<Button variant="secondary" onPress={close}>
Cancel
</Button>
<Button variant="accent" onPress={close}>
Confirm
</Button>
</ButtonGroup>
</Dialog>
)}
</DialogTrigger>
</Flex>
</View>
)}

{isHash('spectrum-well') && (
<View {...sampleSectionIdAndClassesSpectrum('spectrum-well')}>
<h3>Wells</h3>
<Well>This is a well.</Well>
</View>
)}
</Grid>
</div>
);
Expand Down
Loading

0 comments on commit 78fe14d

Please sign in to comment.