b5b41da183
* storybook v2 init * Merge config into storybook vite build * Remove path * Storybook config tweaks * Added styles and settings for storybook v2, and started working on button documentation and examples. * Badges + flex wrap on mobile * Breadcrumbs+button+avatar * Checkbox * Input + moving files around * WIP table * WIP table grid * Replaced imports for new components. * Added first steps for varianttable. * Small alignment fix. * Custom Args Table - With scrollbar * Adding table to components that need it + darkmode * Add intro * Fix types * Remove V1 storybook and replace with V2 * Fix badge type error * Fixed storybook dependencies * Added cover image to storybook * Remove vita from ts config, we dont use vite. * Fixed button import. * Explained postcss pseudo plugin. * Fixed badge import. * Add Avatar Stories * ButtonGroup Stories * Fixed imports * Add checkbox stories * Add exports for differnt types of inputs * Fix form and text area input * Fix mass import errors Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl> Co-authored-by: Alex van Andel <me@alexvanandel.com>
81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
import React, { ReactElement, ReactNode } from "react";
|
|
|
|
import { classNames } from "@calcom/lib";
|
|
|
|
export function VariantsTable({
|
|
children,
|
|
titles,
|
|
isDark,
|
|
columnMinWidth = 150,
|
|
}: {
|
|
children: ReactElement<RowProps> | ReactElement<RowProps>[];
|
|
titles: string[];
|
|
isDark?: boolean;
|
|
// Mainly useful on mobile, so components don't get squeesed
|
|
columnMinWidth?: number;
|
|
}) {
|
|
const columns = React.Children.toArray(children) as ReactElement<RowProps>[];
|
|
return (
|
|
<div
|
|
className={classNames(
|
|
isDark &&
|
|
"relative py-8 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-screen before:bg-[#22252A]"
|
|
)}>
|
|
<div className="z-1 relative mx-auto w-full max-w-[1200px] overflow-auto pr-8 pt-6">
|
|
<table>
|
|
<RowTitles titles={titles} />
|
|
{columns.map((column) => (
|
|
<tr className="p-2 pr-6 pb-6" key={column.props.variant}>
|
|
<th
|
|
className="p-2 pr-6 pb-6 text-left text-sm font-normal text-[#8F8F8F]"
|
|
key={column.props.variant}>
|
|
{column.props.variant}
|
|
</th>
|
|
{React.Children.count(column.props.children) &&
|
|
React.Children.map(column.props.children, (cell) => (
|
|
<td className="p-2 pr-6 pb-6" style={{ minWidth: `${columnMinWidth}px` }}>
|
|
{cell}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</table>
|
|
</div>
|
|
{!isDark && (
|
|
<div data-mode="dark">
|
|
<VariantsTable titles={titles} isDark columnMinWidth={columnMinWidth}>
|
|
{children}
|
|
</VariantsTable>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface RowProps {
|
|
variant: string;
|
|
children: ReactNode;
|
|
}
|
|
|
|
/**
|
|
* There are two reasons we have this "empty" wrapper component:
|
|
* 1. In order to have an isolate group per variant, which we iterate through in the table component.
|
|
* 2. To have a way to pass the variant.
|
|
*/
|
|
export function VariantRow({ children }: RowProps) {
|
|
return <>{children}</>;
|
|
}
|
|
|
|
export function RowTitles({ titles }: { titles: string[] }) {
|
|
return (
|
|
<tr>
|
|
<th className="p-2 pr-6 pb-6 text-left text-sm font-normal text-[#8F8F8F]" />
|
|
{titles.map((title) => (
|
|
<th className="p-2 pr-6 pb-6 text-left text-sm font-normal text-[#8F8F8F]" key={title}>
|
|
{title}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
);
|
|
}
|