Skip to content

Commit 6cc9731

Browse files
hasparushasparus
authored
Add stories for ComparisonTable, allow highlighting with a CSS, and expose scheme (#2048)
1 parent b1fceae commit 6cc9731

File tree

4 files changed

+177
-10
lines changed

4 files changed

+177
-10
lines changed

‎.changeset/thirty-numbers-vanish.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@theguild/components": patch
3+
---
4+
5+
Add stories for ComparisonTable, allow highlighting with a CSS, and expose `scheme`

‎packages/components/src/components/comparison-table/index.tsx

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
11
import { ComponentProps, FC } from 'react';
22
import { cn } from '@theguild/components';
33

4-
const Table: FC<ComponentProps<'table'>> = ({ className, ...props }) => {
4+
export interface ComparisonTableProps extends React.HTMLAttributes<HTMLTableElement> {
5+
scheme?: 'green' | 'neutral';
6+
}
7+
const Table = ({ className, scheme = 'green', ...props }: ComparisonTableProps) => {
58
return (
69
<table
710
className={cn(
8-
'x:block x:overflow-x-auto nextra-scrollbar overflow-x-auto rounded-2xl border border-green-200',
11+
'x:block x:overflow-x-auto nextra-scrollbar overflow-x-auto rounded-2xl border border-[--border]',
12+
scheme === 'green' &&
13+
'[--border:theme(colors.green.200)] [--highlight-bg:theme(colors.green.100)]',
14+
scheme === 'neutral' &&
15+
'[--border:theme(colors.beige.400)] [--highlight-bg:theme(colors.beige.100)] dark:[--border:theme(colors.neutral.800)]',
916
className,
1017
)}
1118
{...props}
@@ -18,16 +25,20 @@ const TableRow: FC<ComponentProps<'tr'> & { highlight?: boolean }> = ({
1825
className,
1926
...props
2027
}) => {
21-
return <tr className={cn(highlight && 'bg-green-100', className)} {...props} />;
28+
return (
29+
<tr
30+
className={cn(
31+
'bg-[--highlight,var(--highlight-bg)] [--highlight:0]',
32+
highlight && '[--highlight:initial]',
33+
className,
34+
)}
35+
{...props}
36+
/>
37+
);
2238
};
2339

2440
const cellStyle = cn(
25-
'border border-green-200 p-4 first:border-l-0 last:border-r-0',
26-
'[tbody_&]:border-b-0 [thead_&]:border-t-0',
27-
'first:sticky',
28-
'first:left-0',
29-
'max-sm:first:drop-shadow-2xl',
30-
'first:bg-[rgb(var(--nextra-bg))]',
41+
'border border-[--border] p-4 first:sticky first:left-0 first:border-l-0 first:bg-[--highlight,var(--highlight-bg)] last:border-r-0 max-sm:first:drop-shadow-2xl [tbody_&]:border-b-0 [thead_&]:border-t-0',
3142
);
3243

3344
const TableHeader: FC<ComponentProps<'th'>> = ({ className, ...props }) => {
@@ -38,6 +49,10 @@ const TableCell: FC<ComponentProps<'td'>> = ({ className, ...props }) => {
3849
return <td className={cn(cellStyle, className)} {...props} />;
3950
};
4051

52+
/**
53+
* It's exported under the name `ComparisonTable`
54+
* because we also reexport `Table` from nextra.
55+
*/
4156
export const ComparisonTable = Object.assign(Table, {
4257
Row: TableRow,
4358
Header: TableHeader,

‎packages/components/src/components/comparison-table/table.stories.tsx

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
import { Meta, StoryObj } from '@storybook/react';
2+
import { hiveThemeDecorator } from '../../../../../.storybook/hive-theme-decorator';
3+
import { ComparisonTableProps, ComparisonTable as Table } from './index';
4+
5+
export default {
6+
title: 'Components/Table',
7+
component: Table,
8+
decorators: [hiveThemeDecorator],
9+
parameters: {
10+
padding: true,
11+
},
12+
argTypes: {
13+
scheme: {
14+
control: 'select',
15+
options: ['green', 'neutral'],
16+
},
17+
},
18+
} satisfies Meta<ComparisonTableProps>;
19+
20+
export const PerformanceTable: StoryObj<ComparisonTableProps> = {
21+
render: props => (
22+
<Table
23+
scheme="neutral"
24+
// highlight can be set with CSS for the cases where it's awkward to add it as a prop
25+
// `initial` isn't a perfect name for `"yes"`, but this is an edge case for MDX anyway
26+
className="w-min whitespace-pre [&_tbody_tr:last-child]:[--highlight:initial]"
27+
{...props}
28+
>
29+
<thead>
30+
<Table.Row>
31+
<Table.Header>Name</Table.Header>
32+
<Table.Header>Language</Table.Header>
33+
<Table.Header>Server</Table.Header>
34+
<Table.Header>Latency avg</Table.Header>
35+
<Table.Header>Requests</Table.Header>
36+
</Table.Row>
37+
</thead>
38+
<tbody>
39+
<Table.Row>
40+
<Table.Cell>GraphQL Yoga with Response Cache</Table.Cell>
41+
<Table.Cell>Node.js</Table.Cell>
42+
<Table.Cell>http</Table.Cell>
43+
<Table.Cell>46.54ms</Table.Cell>
44+
<Table.Cell>2.2kps</Table.Cell>
45+
</Table.Row>
46+
<Table.Row>
47+
<Table.Cell>GraphQL Yoga with JIT</Table.Cell>
48+
<Table.Cell>Node.js</Table.Cell>
49+
<Table.Cell>http</Table.Cell>
50+
<Table.Cell>764.83ms</Table.Cell>
51+
<Table.Cell>120ps</Table.Cell>
52+
</Table.Row>
53+
<Table.Row>
54+
<Table.Cell>GraphQL Yoga</Table.Cell>
55+
<Table.Cell>Node.js</Table.Cell>
56+
<Table.Cell>http</Table.Cell>
57+
<Table.Cell>916.90ms</Table.Cell>
58+
<Table.Cell>100ps</Table.Cell>
59+
</Table.Row>
60+
<Table.Row>
61+
<Table.Cell>Apollo Server</Table.Cell>
62+
<Table.Cell>Node.js</Table.Cell>
63+
<Table.Cell>Express</Table.Cell>
64+
<Table.Cell>1,234.12ms</Table.Cell>
65+
<Table.Cell>64ps</Table.Cell>
66+
</Table.Row>
67+
</tbody>
68+
</Table>
69+
),
70+
};
71+
72+
export const FrameworksTable: StoryObj<ComparisonTableProps> = {
73+
render: props => (
74+
<Table scheme="green" {...props}>
75+
<thead>
76+
<Table.Row>
77+
<Table.Header>Name</Table.Header>
78+
<Table.Header>Productivity / Maintainability</Table.Header>
79+
<Table.Header>Unified Schema design</Table.Header>
80+
<Table.Header>Sub-services support</Table.Header>
81+
</Table.Row>
82+
</thead>
83+
<tbody>
84+
<Table.Row highlight>
85+
<Table.Cell>GraphQL Mesh</Table.Cell>
86+
<Table.Cell>
87+
Packages with a server, caching, Envelop plugins, and large sub-service types support.
88+
Configuration-based with custom resolvers.
89+
</Table.Cell>
90+
<Table.Cell>
91+
Flexible Schema design with Transforms and custom resolvers support.
92+
</Table.Cell>
93+
<Table.Cell>Support for a large range of types of sub-service and databases.</Table.Cell>
94+
</Table.Row>
95+
<Table.Row>
96+
<Table.Cell>GraphQL Tools</Table.Cell>
97+
<Table.Cell>
98+
Programmatic approach at the Gateway level. Type merging makes it easier to deal with
99+
sub-services conflicts.
100+
</Table.Cell>
101+
<Table.Cell>Access to all GraphQL Schema building libraries.</Table.Cell>
102+
<Table.Cell>
103+
Only supports GraphQL sub-services out of the box. Other sub-service types can be
104+
supported with Schema extensions at the Gateway level.
105+
</Table.Cell>
106+
</Table.Row>
107+
<Table.Row>
108+
<Table.Cell>Apollo Server with DataSources</Table.Cell>
109+
<Table.Cell>
110+
Requires a lot of coding and maintenance work at the DataSources level.
111+
</Table.Cell>
112+
<Table.Cell>Access to all GraphQL Schema building libraries.</Table.Cell>
113+
<Table.Cell>
114+
Integrating with some type of sub-services might require some extra work.
115+
</Table.Cell>
116+
</Table.Row>
117+
<Table.Row>
118+
<Table.Cell>Apollo Federation</Table.Cell>
119+
<Table.Cell>
120+
Rover CLI and Apollo Studio. Only the Apollo Gateway needs maintenance.
121+
</Table.Cell>
122+
<Table.Cell>Access to all GraphQL Schema building libraries.</Table.Cell>
123+
<Table.Cell>Only supports "Federation compliant" GraphQL sub-services.</Table.Cell>
124+
</Table.Row>
125+
<Table.Row>
126+
<Table.Cell>Hasura</Table.Cell>
127+
<Table.Cell>
128+
Plug and play solution. Configuration-based with custom resolvers.
129+
</Table.Cell>
130+
<Table.Cell>
131+
The Unified Schema is directly linked to the underlying database schema or sub-services
132+
design.
133+
</Table.Cell>
134+
<Table.Cell>
135+
Only supports GraphQL and REST sub-services and, a set of databases.
136+
</Table.Cell>
137+
</Table.Row>
138+
</tbody>
139+
</Table>
140+
),
141+
};

‎packages/components/src/index.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ export {
77
Mermaid,
88
Steps,
99
Tabs,
10-
Table,
1110
Bleed,
1211
Collapse,
1312
Search,
1413
Banner,
14+
Table,
1515
} from 'nextra/components';
1616
export { useMounted } from 'nextra/hooks';
1717
export * from './components';
@@ -22,6 +22,12 @@ export { cn } from './cn';
2222
export * from './next-types';
2323
export { normalizePages } from 'nextra/normalize-pages';
2424

25+
/**
26+
* @deprecated Consider using `ComparisonTable` instead.
27+
* This name was kept for back-compat, because the public
28+
* API differs,
29+
*/
30+
2531
declare module 'react' {
2632
interface CSSProperties {
2733
[key: `--${string}`]: string | number | undefined;

0 commit comments

Comments
 (0)