Skip to content

Commit

Permalink
Fix snippets
Browse files Browse the repository at this point in the history
  • Loading branch information
@michaeltaranto
michaeltaranto committed Dec 23, 2024
1 parent ac3f25d commit 6be7625
Show file tree
Hide file tree
Showing 2 changed files with 147 additions and 170 deletions.
315 changes: 145 additions & 170 deletions packages/braid-design-system/src/lib/components/Table/Table.snippets.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,29 +11,32 @@ import {
Badge,
ButtonIcon,
MenuRenderer,
MenuItem,
IconOverflow,
Stack,
} from '../../playroom/components';
import source from '@braid-design-system/source.macro';
import { MenuItem } from '../MenuItem/MenuItem';
import { Stack } from '../Stack/Stack';
import { stripTypeAnyFromCode } from './stripTypeAnyFromCode';

const state = new Map<string, any>();

function setDefaultState(name: string, data: unknown) {
state.set(name, data);
}

function getState(name: string) {
return state.get(name);
}
export const snippets: Snippets = [
{
name: 'Basic',
code: stripTypeAnyFromCode(
source(
<>
{setDefaultState('basicRowData', [
code: source(
<Table label="Basic table example">
<TableHeader>
<TableRow>
<TableHeaderCell>
<Text>Lorem</Text>
</TableHeaderCell>
<TableHeaderCell>
<Text>Ipsum</Text>
</TableHeaderCell>
<TableHeaderCell>
<Text>Dolor</Text>
</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
{[
{
column1: 'Sit',
column2: 'Amet',
Expand All @@ -49,47 +52,48 @@ export const snippets: Snippets = [
column2: 'Interdum',
column3: 'Viverra',
},
])}
<Table label="Basic table example">
<TableHeader>
<TableRow>
<TableHeaderCell>
<Text>Lorem</Text>
</TableHeaderCell>
<TableHeaderCell>
<Text>Ipsum</Text>
</TableHeaderCell>
<TableHeaderCell>
<Text>Dolor</Text>
</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
{getState('basicRowData').map((row: any) => (
<TableRow key={row.column1}>
<TableCell>
<Text>{row.column1}</Text>
</TableCell>
<TableCell>
<Text>{row.column2}</Text>
</TableCell>
<TableCell>
<Text>{row.column3}</Text>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</>,
),
].map((row) => (
<TableRow key={row.column1}>
<TableCell>
<Text>{row.column1}</Text>
</TableCell>
<TableCell>
<Text>{row.column2}</Text>
</TableCell>
<TableCell>
<Text>{row.column3}</Text>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>,
),
},
{
name: 'With status and actions columns',
code: stripTypeAnyFromCode(
source(
<>
{setDefaultState('statusAndActionsData', [
code: source(
<Table label="Status and actions example">
<TableHeader>
<TableRow>
<TableHeaderCell width="content">
<Text>Status</Text>
</TableHeaderCell>
<TableHeaderCell width="30%">
<Text>Data</Text>
</TableHeaderCell>
<TableHeaderCell>
<Text>Data</Text>
</TableHeaderCell>
<TableHeaderCell>
<Text>Data</Text>
</TableHeaderCell>
<TableHeaderCell width="content" align="right">
<Text>Actions</Text>
</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
{[
{
status: 'Lorem',
column1: 'Sit',
Expand All @@ -108,75 +112,64 @@ export const snippets: Snippets = [
column2: 'Interdum',
column3: 'Viverra',
},
])}
<Table label="Status and actions example">
<TableHeader>
<TableRow>
<TableHeaderCell width="content">
<Text>Status</Text>
</TableHeaderCell>
<TableHeaderCell width="30%">
<Text>Data</Text>
</TableHeaderCell>
<TableHeaderCell>
<Text>Data</Text>
</TableHeaderCell>
<TableHeaderCell>
<Text>Data</Text>
</TableHeaderCell>
<TableHeaderCell width="content" align="right">
<Text>Actions</Text>
</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
{getState('statusAndActionsData').map((row: any) => (
<TableRow key={row.column1}>
<TableCell width="content">
<Badge bleedY>{row.status}</Badge>
</TableCell>
<TableCell>
<Text>{row.column1}</Text>
</TableCell>
<TableCell>
<Text>{row.column2}</Text>
</TableCell>
<TableCell>
<Text>{row.column3}</Text>
</TableCell>
<TableCell width="content" align="right">
<MenuRenderer
align="right"
offsetSpace="xsmall"
trigger={(triggerProps) => (
<ButtonIcon
icon={<IconOverflow />}
label="Options"
size="small"
variant="transparent"
id={`options-${row.column1}`}
{...triggerProps}
/>
)}
>
<MenuItem onClick={() => {}}>Button</MenuItem>
<MenuItem onClick={() => {}}>Button</MenuItem>
</MenuRenderer>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</>,
),
].map((row) => (
<TableRow key={row.column1}>
<TableCell width="content">
<Badge bleedY>{row.status}</Badge>
</TableCell>
<TableCell>
<Text>{row.column1}</Text>
</TableCell>
<TableCell>
<Text>{row.column2}</Text>
</TableCell>
<TableCell>
<Text>{row.column3}</Text>
</TableCell>
<TableCell width="content" align="right">
<MenuRenderer
align="right"
offsetSpace="xsmall"
trigger={(triggerProps) => (
<ButtonIcon
icon={<IconOverflow />}
label="Options"
size="small"
variant="transparent"
id={`options-${row.column1}`}
{...triggerProps}
/>
)}
>
<MenuItem onClick={() => {}}>Button</MenuItem>
<MenuItem onClick={() => {}}>Button</MenuItem>
</MenuRenderer>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>,
),
},
{
name: 'With multi-line cell data and actions',
code: stripTypeAnyFromCode(
source(
<>
{setDefaultState('multiLineDataCell', [
code: source(
<Table label="Multi-line cell data example">
<TableHeader>
<TableRow>
<TableHeaderCell>
<Text>Data</Text>
</TableHeaderCell>
<TableHeaderCell>
<Text>Data</Text>
</TableHeaderCell>
<TableHeaderCell width="content" align="right">
<Text>Actions</Text>
</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
{[
{
line1: 'Sit',
line2: 'Amet',
Expand All @@ -192,58 +185,40 @@ export const snippets: Snippets = [
line2: 'Interdum',
column2: 'Viverra',
},
])}
<Table label="Multi-line cell data example">
<TableHeader>
<TableRow>
<TableHeaderCell>
<Text>Data</Text>
</TableHeaderCell>
<TableHeaderCell>
<Text>Data</Text>
</TableHeaderCell>
<TableHeaderCell width="content" align="right">
<Text>Actions</Text>
</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
{getState('multiLineDataCell').map((row: any) => (
<TableRow key={row.line1}>
<TableCell>
<Stack space="xsmall">
<Text>{row.line1}</Text>
<Text>{row.line2}</Text>
</Stack>
</TableCell>
<TableCell>
<Text>{row.column2}</Text>
</TableCell>
<TableCell width="content" align="right">
<MenuRenderer
align="right"
offsetSpace="xsmall"
trigger={(triggerProps) => (
<ButtonIcon
icon={<IconOverflow />}
label="Options"
size="small"
variant="transparent"
id={`options-${row.line1}`}
{...triggerProps}
/>
)}
>
<MenuItem onClick={() => {}}>Button</MenuItem>
<MenuItem onClick={() => {}}>Button</MenuItem>
</MenuRenderer>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</>,
),
].map((row) => (
<TableRow key={row.line1}>
<TableCell>
<Stack space="xsmall">
<Text>{row.line1}</Text>
<Text>{row.line2}</Text>
</Stack>
</TableCell>
<TableCell>
<Text>{row.column2}</Text>
</TableCell>
<TableCell width="content" align="right">
<MenuRenderer
align="right"
offsetSpace="xsmall"
trigger={(triggerProps) => (
<ButtonIcon
icon={<IconOverflow />}
label="Options"
size="small"
variant="transparent"
id={`options-${row.line1}`}
{...triggerProps}
/>
)}
>
<MenuItem onClick={() => {}}>Button</MenuItem>
<MenuItem onClick={() => {}}>Button</MenuItem>
</MenuRenderer>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>,
),
},
];
2 changes: 2 additions & 0 deletions packages/braid-design-system/src/lib/playroom/snippets.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import { snippets as Spread } from './snippets/Spread';
import { snippets as Stack } from './snippets/Stack';
import { snippets as Stepper } from './snippets/Stepper';
import { snippets as Strong } from './snippets/Strong';
import { snippets as Table } from './snippets/Table';
import { snippets as Tabs } from './snippets/Tabs';
import { snippets as Tag } from './snippets/Tag';
import { snippets as Text } from './snippets/Text';
Expand Down Expand Up @@ -84,6 +85,7 @@ export default Object.entries({
Stack,
Stepper,
Strong,
Table,
Tabs,
Tag,
Text,
Expand Down

0 comments on commit 6be7625

Please sign in to comment.