cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

[19/n][Storybook] basic Table uses themes

Browse Source
This commit is contained in:
Vivian Phung 2024-05-14 18:45:38 -04:00 committed by Vivian Phung
parent 6975360d48
commit 4c3072ed50
2 changed files with 67 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
packages/frontend/src/components/shared/Table/Table.theme.ts
View File

@ -1,35 +1,49 @@
interface ThemeProps { import { tv, VariantProps } from 'tailwind-variants';
base: string;
header: string;
row: string;
columnHeaderCell: string;
rowHeaderCell: string;
cell: string;
}
const primaryTheme: ThemeProps = { export const tableTheme = tv({
base: 'min-w-full border-collapse', slots: {
header: 'border-b border-sky-950/opacity-5 font-medium leading-tight', root: ['min-w-full', 'border-collapse'],
row: 'border-b border-sky-950/opacity-5', header: [
columnHeaderCell: 'p-2',
'p-4 text-sky-950 text-sm font-medium uppercase tracking-wider text-left', 'border-b',
rowHeaderCell: 'border-sky-950/opacity-5',
'p-4 text-slate-600 text-sm font-normal leading-tight text-left', 'text-sky-950',
cell: 'p-4 whitespace-nowrap text-sm text-slate-600 font-normal text-left', 'text-sm',
}; 'font-medium',
'leading-tight',
],
body: [],
row: ['border-b', 'border-sky-950/opacity-5'],
columnHeaderCell: [
'p-4',
'text-sky-950',
'text-sm',
'font-medium',
'uppercase',
'tracking-wider',
'text-left',
],
rowHeaderCell: [
'p-4',
'text-slate-600',
'text-sm',
'font-normal',
'leading-tight',
'text-left',
],
cell: [
'p-4',
'whitespace-nowrap',
'text-sm',
'text-slate-600',
'font-normal',
'text-left',
],
},
variants: {},
defaultVariants: {
orientation: 'vertical',
},
});
const secondaryTheme: ThemeProps = { export type TableTheme = VariantProps<typeof tableTheme>;
base: 'min-w-full border-collapse',
header:
'p-2 border-b border-sky-950/5 text-sky-950 text-sm font-medium leading-tight',
row: 'text-left border-b border-gray-300/50',
columnHeaderCell:
'px-6 py-3 text-xs font-medium uppercase tracking-wider text-gray-800',
rowHeaderCell: 'px-6 py-4 font-medium whitespace-nowrap text-gray-800',
cell: 'px-6 py-4 whitespace-nowrap text-sm text-gray-600',
};
export const tableTheme = {
primary: primaryTheme,
secondary: secondaryTheme,
};

49
packages/frontend/src/components/shared/Table/Table.tsx
View File

@ -3,12 +3,8 @@ import { tableTheme } from './Table.theme';
type TableComponentProps = { type TableComponentProps = {
children: React.ReactNode; children: React.ReactNode;
variant?: keyof typeof tableTheme;
}; };
const useTheme = (variant: 'primary' | 'secondary' = 'primary') =>
tableTheme[variant];
const Table: React.FC<TableComponentProps> & { const Table: React.FC<TableComponentProps> & {
Header: typeof Header; Header: typeof Header;
Body: typeof Body; Body: typeof Body;
@ -16,44 +12,39 @@ const Table: React.FC<TableComponentProps> & {
ColumnHeaderCell: typeof ColumnHeaderCell; ColumnHeaderCell: typeof ColumnHeaderCell;
RowHeaderCell: typeof RowHeaderCell; RowHeaderCell: typeof RowHeaderCell;
Cell: typeof Cell; Cell: typeof Cell;
} = ({ children, variant = 'primary' }) => { } = ({ children }) => {
const theme = useTheme(variant); const theme = tableTheme();
return <table className={theme.base}>{children}</table>; return <table className={theme.root()}>{children}</table>;
}; };
const Header: React.FC<TableComponentProps> = ({ children, variant }) => { const Header: React.FC<TableComponentProps> = ({ children }) => {
const theme = useTheme(variant); const theme = tableTheme();
return <thead className={theme.header}>{children}</thead>; return <thead className={theme.header()}>{children}</thead>;
}; };
const Body: React.FC<TableComponentProps> = ({ children }) => { const Body: React.FC<TableComponentProps> = ({ children }) => {
return <tbody>{children}</tbody>; const theme = tableTheme();
return <tbody className={theme.body()}>{children}</tbody>;
}; };
const Row: React.FC<TableComponentProps> = ({ children, variant }) => { const Row: React.FC<TableComponentProps> = ({ children }) => {
const theme = useTheme(variant); const theme = tableTheme();
return <tr className={theme.row}>{children}</tr>; return <tr className={theme.row()}>{children}</tr>;
}; };
const ColumnHeaderCell: React.FC<TableComponentProps> = ({ const ColumnHeaderCell: React.FC<TableComponentProps> = ({ children }) => {
children, const theme = tableTheme();
variant, return <th className={theme.columnHeaderCell()}>{children}</th>;
}) => {
const theme = useTheme(variant);
return <th className={theme.columnHeaderCell}>{children}</th>;
}; };
const RowHeaderCell: React.FC<TableComponentProps> = ({ const RowHeaderCell: React.FC<TableComponentProps> = ({ children }) => {
children, const theme = tableTheme();
variant, return <th className={theme.rowHeaderCell()}>{children}</th>;
}) => {
const theme = useTheme(variant);
return <th className={theme.rowHeaderCell}>{children}</th>;
}; };
const Cell: React.FC<TableComponentProps> = ({ children, variant }) => { const Cell: React.FC<TableComponentProps> = ({ children }) => {
const theme = useTheme(variant); const theme = tableTheme();
return <td className={theme.cell}>{children}</td>; return <td className={theme.cell()}>{children}</td>;
}; };
Table.Header = Header; Table.Header = Header;