cfbender/snowballtools-base
1
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests 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 {
base: string;
header: string;
row: string;
columnHeaderCell: string;
rowHeaderCell: string;
cell: string;
}
import { tv, VariantProps } from 'tailwind-variants';
const primaryTheme: ThemeProps = {
base: 'min-w-full border-collapse',
header: 'border-b border-sky-950/opacity-5 font-medium leading-tight',
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',
};
export const tableTheme = tv({
slots: {
root: ['min-w-full', 'border-collapse'],
header: [
'p-2',
'border-b',
'border-sky-950/opacity-5',
'text-sky-950',
'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 = {
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,
};
export type TableTheme = VariantProps<typeof tableTheme>;

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

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