Skip to content

Commit

Permalink
use data table for design token table
Browse files Browse the repository at this point in the history
  • Loading branch information
@PixeledCode
PixeledCode committed Dec 20, 2023
1 parent ea8dc9c commit 8dabf60
Show file tree
Hide file tree
Showing 9 changed files with 160 additions and 48,724 deletions.
48,618 changes: 0 additions & 48,618 deletions package-lock.json
View file

This file was deleted.

21 changes: 20 additions & 1 deletion packages/opub-ui/docs/Foundations/Design Tokens.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import tokens from '../../styles/tokens.json';
import { TokenTable } from './TokenTable';

const meta = {
Expand All @@ -6,8 +7,26 @@ const meta = {

export default meta;

const colorsRaw = { ...tokens.collections[0].modes[0].variables };
const colors = Object.values(colorsRaw).map((color: any) => {
const value =
typeof color.value === 'string' ? color.value : color.value.name;
return {
name: color.name,
value,
example:
typeof color.value === 'string'
? color.value
: convertToCssVariable(value),
};
});

export const Colors: any = {
render: () => {
return <TokenTable />;
return <TokenTable data={colors} />;
},
};

function convertToCssVariable(name: string) {
return `var(--${name.split('/').join('-').toLowerCase()})`;
}
121 changes: 63 additions & 58 deletions packages/opub-ui/docs/Foundations/TokenTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { Button } from '../../src/components/Button';
import { DataTable } from '../../src/components/DataTable';
import { useToast } from '../../src/components/Toast';
import tokens from '../../styles/tokens.json';
import { createColumnHelper } from '@tanstack/react-table';

export const TokenTable = () => {
const colors = { ...tokens.collections[0].modes[0].variables };
export const TokenTable = ({ data }: any) => {
const { toast } = useToast();

function copyToClipboard(text: string) {
Expand All @@ -15,62 +15,67 @@ export const TokenTable = () => {
document.body.removeChild(elem);
}

type Token = {
name: string;
value: string;
example: any;
};

const columnHelper = createColumnHelper<Token>();

const columns = [
columnHelper.accessor('name', {
cell: (info) => {
const value = info.getValue();
return (
<Button
onClick={() => {
copyToClipboard(convertToCssVariable(value));

toast({
title: `copied ${value} as css variable`,
});
}}
kind="tertiary"
>
{value}
</Button>
);
},
header: () => 'Token',
}),
columnHelper.accessor('value', {
cell: (info) => info.getValue(),
header: () => 'Value',
}),
columnHelper.accessor('example', {
cell: (info) => {
return (
<div
className="w-full h-12 rounded-1 border-1 border-solid border-borderDefault"
style={{ backgroundColor: info.getValue() }}
aria-hidden="true"
/>
);
},
header: () => 'Example',
}),
];

return (
<div className="relative overflow-x-auto shadow-basicMd sm:rounded-4">
<table className="w-full text-100 text-left rtl:text-right text-textSubdued">
<thead className="text-textDefault uppercase bg-surfaceSelected">
<tr>
<th scope="col" className="px-6 py-3">
token
</th>
<th scope="col" className="px-6 py-3">
value
</th>
</tr>
</thead>
<tbody>
{Object.values(colors).map((row) => {
let bgColor, name;
if (typeof row.value === 'object') {
const converted = row.value.name.split('/').join('-');
bgColor = `var(--${converted})`;
name = row.value.name;
} else {
bgColor = row.value;
name = row.value;
}
return (
<tr
key={row.name}
className="odd:bg-surfaceDefault even:bg-surfaceSubdued"
>
<td className="px-6 py-4">
<Button
onClick={() => {
const converted = row.name.split('/').join('-');
copyToClipboard(`var(--${converted})`);
toast({
title: `copied ${row.name} as css variable`,
});
}}
kind="tertiary"
>
{row.name}
</Button>
</td>
<td className="px-6 py-4 flex items-center gap-2">
<div
className="w-4 h-4 rounded-full"
style={{ backgroundColor: bgColor }}
aria-hidden="true"
/>
<span>{name}</span>
</td>
</tr>
);
})}
</tbody>
</table>
<div>
<DataTable
rows={data}
columns={columns}
hideSelection
addToolbar
hideViewSelector
defaultRowCount={50}
/>
</div>
);
};

function convertToCssVariable(name: string) {
return `var(--${name.split('/').join('-').toLowerCase()})`;
}
69 changes: 43 additions & 26 deletions packages/opub-ui/src/components/DataTable/DataTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const DataTable = (props: DataTableProps) => {
const {
rows,
columns,
columnContentTypes: columnTypes = 'text',
columnContentTypes: columnTypes,
hoverable = true,
increasedTableDensity = true,
hasZebraStripingOnData = false,
Expand All @@ -47,12 +47,14 @@ const DataTable = (props: DataTableProps) => {
onSort,
onRowSelectionChange,
defaultSelectedRows,
hasMoreItems = false,
hideFooter = false,
rowActions,
addToolbar,
filters,
sortColumns,
hideSelection = false,
hideViewSelector = false,
defaultRowCount = 10,
...others
} = props;

Expand Down Expand Up @@ -98,14 +100,18 @@ const DataTable = (props: DataTableProps) => {
getFacetedUniqueValues: getFacetedUniqueValues(),
onColumnFiltersChange: setColumnFilters,
onColumnVisibilityChange: setColumnVisibility,
enableRowSelection: true,
enableRowSelection: !hideSelection,
filterFns: {
columnFilter: (row, id, value) => {
return value.includes(row.getValue(id));
},
},
});

React.useLayoutEffect(() => {
table.setPageSize(defaultRowCount);
}, [defaultRowCount]);

const rowCountIsEven = rows.length % 2 === 0;
const themeClass = cx(
styles.DataTable,
Expand All @@ -119,7 +125,13 @@ const DataTable = (props: DataTableProps) => {

return (
<div className={`opub-DataTable ${themeClass}`} {...others}>
{addToolbar && <Toolbar filters={filters} table={table} />}
{addToolbar && (
<Toolbar
filters={filters}
table={table}
hideViewSelector={hideViewSelector}
/>
)}
<div
className={cx(styles.ScrollContainer, addToolbar && styles.withFilter)}
>
Expand All @@ -130,25 +142,27 @@ const DataTable = (props: DataTableProps) => {
className={cx(tableRowClassname, styles.TableHeaderRow)}
key={headerGroup.id}
>
<th
className={cx(
styles.Cell,
styles['Cell-header'],
styles.Checkbox
)}
>
<Checkbox
name={headerGroup.id}
checked={
table.getIsAllPageRowsSelected()
? true
: table.getIsSomePageRowsSelected()
? 'indeterminate'
: false
}
onChange={() => table.toggleAllPageRowsSelected()}
/>
</th>
{!hideSelection && (
<th
className={cx(
styles.Cell,
styles['Cell-header'],
styles.Checkbox
)}
>
<Checkbox
name={headerGroup.id}
checked={
table.getIsAllPageRowsSelected()
? true
: table.getIsSomePageRowsSelected()
? 'indeterminate'
: false
}
onChange={() => table.toggleAllPageRowsSelected()}
/>
</th>
)}
{headerGroup.headers.map((header, index) => {
const text = flexRender(
header.column.columnDef.header,
Expand All @@ -165,7 +179,8 @@ const DataTable = (props: DataTableProps) => {
className={cx(
styles.Cell,
styles['Cell-header'],
columnTypes[index] === 'numeric' &&
columnTypes &&
columnTypes[index] === 'numeric' &&
styles['Cell-numeric'],
isSortable && isSorted && styles['Cell-sorted'],
isSortable && styles['Cell-sortable']
Expand All @@ -174,7 +189,7 @@ const DataTable = (props: DataTableProps) => {
header={header}
sortable={isSortable}
text={text}
columnType={columnTypes[index]}
columnType={columnTypes && columnTypes[index]}
defaultSortDirection={defaultSortDirection}
/>
);
Expand Down Expand Up @@ -208,6 +223,7 @@ const DataTable = (props: DataTableProps) => {
<Row
key={row.id}
row={row}
hideSelection={hideSelection}
classname={cx(
tableRowClassname,
styles.TableBodyRow,
Expand All @@ -224,7 +240,8 @@ const DataTable = (props: DataTableProps) => {
<Cell
className={cx(
styles.Cell,
columnTypes[index] === 'numeric' &&
columnTypes &&
columnTypes[index] === 'numeric' &&
styles['Cell-numeric'],
index === 0 && styles['Cell-firstColumn'],
index === 0 && truncate && styles['Cell-truncated']
Expand Down
6 changes: 3 additions & 3 deletions packages/opub-ui/src/components/DataTable/components/Cell/Cell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@ function SortButton({
column: any;
sortable: boolean;
text: React.ReactNode;
columnType: string;
columnType?: string;
defaultSortDirection: SortDirection;
}) {
const headerClassName = cx(
styles.Heading,
columnType === 'text' && styles['Heading-left']
columnType && columnType === 'text' && styles['Heading-left']
);

const iconClassName = cx(sortable && styles.Icon);
Expand Down Expand Up @@ -58,7 +58,7 @@ type HeaderProps = {
sortable: boolean;
className: string;
text: React.ReactNode;
columnType: string;
columnType?: string;
defaultSortDirection: SortDirection;
};

Expand Down
19 changes: 11 additions & 8 deletions packages/opub-ui/src/components/DataTable/components/Row/Row.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@ type Props = {
children: React.ReactNode;
row: any;
classname: string;
hideSelection?: boolean;
};

export const Row = ({ children, row, classname, ...props }: Props) => {
export const Row = ({ children, row, classname, hideSelection }: Props) => {
const [selected, setSelected] = React.useState(false);

function handleSelection() {
Expand All @@ -33,13 +34,15 @@ export const Row = ({ children, row, classname, ...props }: Props) => {
}}
className={classname}
>
<td className={cx(styles.Cell, styles.Checkbox)}>
<Checkbox
checked={selected}
onCheckedChange={handleSelection}
name={row.id}
/>
</td>
{!hideSelection && (
<td className={cx(styles.Cell, styles.Checkbox)}>
<Checkbox
checked={selected}
onCheckedChange={handleSelection}
name={row.id}
/>
</td>
)}
{children}
</tr>
);
Expand Down
Loading

1 comment on commit 8dabf60

@vercel
Copy link

@vercel vercel bot commented on 8dabf60 Dec 20, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

opub-www – ./apps/www

opub-www.vercel.app
opub-www-git-main-civicdatalab.vercel.app
opub-www-civicdatalab.vercel.app

Please sign in to comment.