components-test-pb 0.1.0 → 0.1.3

package/src/Components/Table/TableBody.tsx

@@ -0,0 +1,13 @@
+import type { FC } from '../../Types/utils/types.js';
+import type { TableBodyProps } from './TableBody.types.js';
+import { useTableBody } from './useTableBody.js';
+import { renderTableBody } from './renderTableBody.js';
+import { useTableBodyStyles } from './useTableBodyStyles.styles.js';
+
+export const TableBody: FC<TableBodyProps> = (props) => {
+    const state = useTableBody(props);
+
+    useTableBodyStyles(state);
+
+    return renderTableBody(state);
+};

package/src/Components/Table/TableBody.types.ts

@@ -0,0 +1,9 @@
+import { ComponentProps, ComponentState, Slot } from '../../Types/compose/types.js';
+
+export type TableBodySlots = {
+    root: NonNullable<Slot<'tbody'>>;
+};
+
+export type TableBodyProps = ComponentProps<TableBodySlots>;
+
+export type TableBodyState = ComponentState<TableBodySlots>;

package/src/Components/Table/TableCell.tsx

@@ -0,0 +1,13 @@
+import type { FC } from '../../Types/utils/types.js';
+import type { TableCellProps } from './TableCell.types.js';
+import { useTableCell } from './useTableCell.js';
+import { renderTableCell } from './renderTableCell.js';
+import { useTableCellStyles } from './useTableCellStyles.styles.js';
+
+export const TableCell: FC<TableCellProps> = (props) => {
+    const state = useTableCell(props);
+
+    useTableCellStyles(state);
+
+    return renderTableCell(state);
+};

package/src/Components/Table/TableCell.types.ts

@@ -0,0 +1,9 @@
+import { ComponentProps, ComponentState, Slot } from '../../Types/compose/types.js';
+
+export type TableCellSlots = {
+    root: NonNullable<Slot<'td'>>;
+};
+
+export type TableCellProps = ComponentProps<TableCellSlots>;
+
+export type TableCellState = ComponentState<TableCellSlots>;

package/src/Components/Table/TableHeader.tsx

@@ -0,0 +1,13 @@
+import type { FC } from '../../Types/utils/types.js';
+import type { TableHeaderProps } from './TableHeader.types.js';
+import { useTableHeader } from './useTableHeader.js';
+import { renderTableHeader } from './renderTableHeader.js';
+import { useTableHeaderStyles } from './useTableHeaderStyles.styles.js';
+
+export const TableHeader: FC<TableHeaderProps> = (props) => {
+    const state = useTableHeader(props);
+
+    useTableHeaderStyles(state);
+
+    return renderTableHeader(state);
+};

package/src/Components/Table/TableHeader.types.ts

@@ -0,0 +1,9 @@
+import { ComponentProps, ComponentState, Slot } from '../../Types/compose/types.js';
+
+export type TableHeaderSlots = {
+    root: NonNullable<Slot<'thead'>>;
+};
+
+export type TableHeaderProps = ComponentProps<TableHeaderSlots>;
+
+export type TableHeaderState = ComponentState<TableHeaderSlots>;

package/src/Components/Table/TableHeaderCell.tsx

@@ -0,0 +1,13 @@
+import type { FC } from '../../Types/utils/types.js';
+import type { TableHeaderCellProps } from './TableHeaderCell.types.js';
+import { useTableHeaderCell } from './useTableHeaderCell.js';
+import { renderTableHeaderCell } from './renderTableHeaderCell.js';
+import { useTableHeaderCellStyles } from './useTableHeaderCellStyles.styles.js';
+
+export const TableHeaderCell: FC<TableHeaderCellProps> = (props) => {
+    const state = useTableHeaderCell(props);
+
+    useTableHeaderCellStyles(state);
+
+    return renderTableHeaderCell(state);
+};

package/src/Components/Table/TableHeaderCell.types.ts

@@ -0,0 +1,13 @@
+import { ComponentProps, ComponentState, Slot } from '../../Types/compose/types.js';
+
+export type TableHeaderCellSlots = {
+    root: NonNullable<Slot<'th'>>;
+};
+
+export type TableHeaderCellProps = ComponentProps<TableHeaderCellSlots> & {
+    sortDirection?: 'ascending' | 'descending';
+};
+
+export type TableHeaderCellState = ComponentState<TableHeaderCellSlots> & {
+    sortDirection?: 'ascending' | 'descending';
+};

package/src/Components/Table/TableRow.tsx

@@ -0,0 +1,13 @@
+import type { FC } from '../../Types/utils/types.js';
+import type { TableRowProps } from './TableRow.types.js';
+import { useTableRow } from './useTableRow.js';
+import { renderTableRow } from './renderTableRow.js';
+import { useTableRowStyles } from './useTableRowStyles.styles.js';
+
+export const TableRow: FC<TableRowProps> = (props) => {
+    const state = useTableRow(props);
+
+    useTableRowStyles(state);
+
+    return renderTableRow(state);
+};

package/src/Components/Table/TableRow.types.ts

@@ -0,0 +1,12 @@
+import { ComponentProps, ComponentState, Slot } from '../../Types/compose/types.js';
+
+export type TableRowSlots = {
+    root: NonNullable<Slot<'tr'>>;
+};
+
+export type TableRowProps = ComponentProps<TableRowSlots> & {
+    appearance?: 'none' | 'brand';
+};
+
+export type TableRowState = ComponentState<TableRowSlots> &
+    Required<Pick<TableRowProps, 'appearance'>>;

package/src/Components/Table/index.ts

@@ -0,0 +1,35 @@
+export type { TableSlots, TableProps, TableState } from './Table.types.js';
+export { Table } from './Table.js';
+export { useTable } from './useTable.js';
+export { renderTable } from './renderTable.js';
+export { useTableStyles } from './useTableStyles.styles.js';
+
+export type { TableHeaderSlots, TableHeaderProps, TableHeaderState } from './TableHeader.types.js';
+export { TableHeader } from './TableHeader.js';
+export { useTableHeader } from './useTableHeader.js';
+export { renderTableHeader } from './renderTableHeader.js';
+export { useTableHeaderStyles } from './useTableHeaderStyles.styles.js';
+
+export type { TableBodySlots, TableBodyProps, TableBodyState } from './TableBody.types.js';
+export { TableBody } from './TableBody.js';
+export { useTableBody } from './useTableBody.js';
+export { renderTableBody } from './renderTableBody.js';
+export { useTableBodyStyles } from './useTableBodyStyles.styles.js';
+
+export type { TableRowSlots, TableRowProps, TableRowState } from './TableRow.types.js';
+export { TableRow } from './TableRow.js';
+export { useTableRow } from './useTableRow.js';
+export { renderTableRow } from './renderTableRow.js';
+export { useTableRowStyles } from './useTableRowStyles.styles.js';
+
+export type { TableHeaderCellSlots, TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types.js';
+export { TableHeaderCell } from './TableHeaderCell.js';
+export { useTableHeaderCell } from './useTableHeaderCell.js';
+export { renderTableHeaderCell } from './renderTableHeaderCell.js';
+export { useTableHeaderCellStyles } from './useTableHeaderCellStyles.styles.js';
+
+export type { TableCellSlots, TableCellProps, TableCellState } from './TableCell.types.js';
+export { TableCell } from './TableCell.js';
+export { useTableCell } from './useTableCell.js';
+export { renderTableCell } from './renderTableCell.js';
+export { useTableCellStyles } from './useTableCellStyles.styles.js';

package/src/Components/Table/renderTable.tsx

@@ -0,0 +1,9 @@
+import type { Element } from '../../Types/utils/types.js';
+import type { TableState } from './Table.types.js';
+
+export const renderTable = (state: TableState): Element => {
+    const Root = state.components.root;
+    const { as: _as, ...rootProps } = state.root;
+
+    return <Root {...rootProps} />;
+};

package/src/Components/Table/renderTableBody.tsx

@@ -0,0 +1,9 @@
+import type { Element } from '../../Types/utils/types.js';
+import type { TableBodyState } from './TableBody.types.js';
+
+export const renderTableBody = (state: TableBodyState): Element => {
+    const Root = state.components.root;
+    const { as: _as, ...rootProps } = state.root;
+
+    return <Root {...rootProps} />;
+};

package/src/Components/Table/renderTableCell.tsx

@@ -0,0 +1,9 @@
+import type { Element } from '../../Types/utils/types.js';
+import type { TableCellState } from './TableCell.types.js';
+
+export const renderTableCell = (state: TableCellState): Element => {
+    const Root = state.components.root;
+    const { as: _as, ...rootProps } = state.root;
+
+    return <Root {...rootProps} />;
+};

package/src/Components/Table/renderTableHeader.tsx

@@ -0,0 +1,9 @@
+import type { Element } from '../../Types/utils/types.js';
+import type { TableHeaderState } from './TableHeader.types.js';
+
+export const renderTableHeader = (state: TableHeaderState): Element => {
+    const Root = state.components.root;
+    const { as: _as, ...rootProps } = state.root;
+
+    return <Root {...rootProps} />;
+};

package/src/Components/Table/renderTableHeaderCell.tsx

@@ -0,0 +1,9 @@
+import type { Element } from '../../Types/utils/types.js';
+import type { TableHeaderCellState } from './TableHeaderCell.types.js';
+
+export const renderTableHeaderCell = (state: TableHeaderCellState): Element => {
+    const Root = state.components.root;
+    const { as: _as, ...rootProps } = state.root;
+
+    return <Root {...rootProps} />;
+};

package/src/Components/Table/renderTableRow.tsx

@@ -0,0 +1,9 @@
+import type { Element } from '../../Types/utils/types.js';
+import type { TableRowState } from './TableRow.types.js';
+
+export const renderTableRow = (state: TableRowState): Element => {
+    const Root = state.components.root;
+    const { as: _as, ...rootProps } = state.root;
+
+    return <Root {...rootProps} />;
+};

package/src/Components/Table/useTable.ts

@@ -0,0 +1,14 @@
+import type { TableProps, TableState } from './Table.types.js';
+
+export const useTable = (props: TableProps): TableState => {
+    const { size, sortable, ...rest } = props;
+
+    return {
+        size: size ?? 'medium',
+        sortable: sortable ?? false,
+
+        components: { root: 'table' },
+
+        root: { ...rest } as TableState['root'],
+    };
+};

package/src/Components/Table/useTableBody.ts

@@ -0,0 +1,9 @@
+import type { TableBodyProps, TableBodyState } from './TableBody.types.js';
+
+export const useTableBody = (props: TableBodyProps): TableBodyState => {
+    return {
+        components: { root: 'tbody' },
+
+        root: { ...props } as TableBodyState['root'],
+    };
+};

package/src/Components/Table/useTableBodyStyles.styles.ts

@@ -0,0 +1,23 @@
+import { makeResetStyles, mergeClasses } from 'css-engine-test-pb';
+import { SlotClassNames } from '../../Types/compose/types.js';
+import { TableBodySlots, TableBodyState } from './TableBody.types.js';
+
+export const tableBodyClassNames: SlotClassNames<TableBodySlots> = {
+    root: 'TableBody'
+};
+
+const useRootBaseClassName = makeResetStyles({
+    display: 'table-row-group',
+});
+
+export const useTableBodyStyles = (state: TableBodyState): TableBodyState => {
+    const rootBaseClassName = useRootBaseClassName();
+
+    state.root.className = mergeClasses(
+        tableBodyClassNames.root,
+        rootBaseClassName,
+        state.root.className,
+    );
+
+    return state;
+};

package/src/Components/Table/useTableCell.ts

@@ -0,0 +1,9 @@
+import type { TableCellProps, TableCellState } from './TableCell.types.js';
+
+export const useTableCell = (props: TableCellProps): TableCellState => {
+    return {
+        components: { root: 'td' },
+
+        root: { ...props } as TableCellState['root'],
+    };
+};

package/src/Components/Table/useTableCellStyles.styles.ts

@@ -0,0 +1,28 @@
+import { makeResetStyles, mergeClasses } from 'css-engine-test-pb';
+import { SlotClassNames } from '../../Types/compose/types.js';
+import { TableCellSlots, TableCellState } from './TableCell.types.js';
+import { Tokens } from '../../Theme/tokens.js';
+
+export const tableCellClassNames: SlotClassNames<TableCellSlots> = {
+    root: 'TableCell'
+};
+
+const useRootBaseClassName = makeResetStyles({
+    textAlign: 'left',
+    paddingTop: Tokens.spacingS,
+    paddingBottom: Tokens.spacingS,
+    paddingLeft: Tokens.spacingM,
+    paddingRight: Tokens.spacingM,
+});
+
+export const useTableCellStyles = (state: TableCellState): TableCellState => {
+    const rootBaseClassName = useRootBaseClassName();
+
+    state.root.className = mergeClasses(
+        tableCellClassNames.root,
+        rootBaseClassName,
+        state.root.className,
+    );
+
+    return state;
+};

package/src/Components/Table/useTableHeader.ts

@@ -0,0 +1,9 @@
+import type { TableHeaderProps, TableHeaderState } from './TableHeader.types.js';
+
+export const useTableHeader = (props: TableHeaderProps): TableHeaderState => {
+    return {
+        components: { root: 'thead' },
+
+        root: { ...props } as TableHeaderState['root'],
+    };
+};

package/src/Components/Table/useTableHeaderCell.ts

@@ -0,0 +1,19 @@
+import type { TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types.js';
+
+export const useTableHeaderCell = (props: TableHeaderCellProps): TableHeaderCellState => {
+    const { sortDirection, ...rest } = props;
+
+    const root = { ...rest } as TableHeaderCellState['root'];
+
+    if (sortDirection) {
+        root['aria-sort'] = sortDirection;
+    }
+
+    return {
+        sortDirection,
+
+        components: { root: 'th' },
+
+        root,
+    };
+};

package/src/Components/Table/useTableHeaderCellStyles.styles.ts

@@ -0,0 +1,40 @@
+import { makeStyles, makeResetStyles, mergeClasses } from 'css-engine-test-pb';
+import { SlotClassNames } from '../../Types/compose/types.js';
+import { TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell.types.js';
+import { Tokens } from '../../Theme/tokens.js';
+
+export const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSlots> = {
+    root: 'TableHeaderCell'
+};
+
+const useRootBaseClassName = makeResetStyles({
+    fontWeight: Tokens.fontWeightSemibold,
+    textAlign: 'left',
+    paddingTop: Tokens.spacingS,
+    paddingBottom: Tokens.spacingS,
+    paddingLeft: Tokens.spacingM,
+    paddingRight: Tokens.spacingM,
+});
+
+const useRootStyles = makeStyles({
+    ascending: {
+        cursor: 'pointer',
+    },
+    descending: {
+        cursor: 'pointer',
+    },
+});
+
+export const useTableHeaderCellStyles = (state: TableHeaderCellState): TableHeaderCellState => {
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+
+    state.root.className = mergeClasses(
+        tableHeaderCellClassNames.root,
+        rootBaseClassName,
+        state.sortDirection && rootStyles[state.sortDirection],
+        state.root.className,
+    );
+
+    return state;
+};

package/src/Components/Table/useTableHeaderStyles.styles.ts

@@ -0,0 +1,23 @@
+import { makeResetStyles, mergeClasses } from 'css-engine-test-pb';
+import { SlotClassNames } from '../../Types/compose/types.js';
+import { TableHeaderSlots, TableHeaderState } from './TableHeader.types.js';
+
+export const tableHeaderClassNames: SlotClassNames<TableHeaderSlots> = {
+    root: 'TableHeader'
+};
+
+const useRootBaseClassName = makeResetStyles({
+    display: 'table-header-group',
+});
+
+export const useTableHeaderStyles = (state: TableHeaderState): TableHeaderState => {
+    const rootBaseClassName = useRootBaseClassName();
+
+    state.root.className = mergeClasses(
+        tableHeaderClassNames.root,
+        rootBaseClassName,
+        state.root.className,
+    );
+
+    return state;
+};

package/src/Components/Table/useTableRow.ts

@@ -0,0 +1,13 @@
+import type { TableRowProps, TableRowState } from './TableRow.types.js';
+
+export const useTableRow = (props: TableRowProps): TableRowState => {
+    const { appearance, ...rest } = props;
+
+    return {
+        appearance: appearance ?? 'none',
+
+        components: { root: 'tr' },
+
+        root: { ...rest } as TableRowState['root'],
+    };
+};

package/src/Components/Table/useTableRowStyles.styles.ts

@@ -0,0 +1,45 @@
+import { makeStyles, makeResetStyles, mergeClasses } from 'css-engine-test-pb';
+import { SlotClassNames } from '../../Types/compose/types.js';
+import { TableRowSlots, TableRowState } from './TableRow.types.js';
+import { Tokens } from '../../Theme/tokens.js';
+
+export const tableRowClassNames: SlotClassNames<TableRowSlots> = {
+    root: 'TableRow'
+};
+
+const useRootBaseClassName = makeResetStyles({
+    borderBottom: `${Tokens.strokeWidthThin} solid ${Tokens.colorNeutralStroke1}`,
+    transitionDuration: Tokens.durationNormal,
+    transitionProperty: 'background',
+    transitionTimingFunction: Tokens.curveEasy,
+});
+
+const useRootStyles = makeStyles({
+    none: {
+        ':hover': {
+            backgroundColor: Tokens.colorNeutralBackground1Hover,
+        },
+    },
+    brand: {
+        backgroundColor: Tokens.colorBrandBackground,
+        color: Tokens.colorBrandForeground1,
+
+        ':hover': {
+            backgroundColor: Tokens.colorBrandBackgroundHover,
+        },
+    },
+});
+
+export const useTableRowStyles = (state: TableRowState): TableRowState => {
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+
+    state.root.className = mergeClasses(
+        tableRowClassNames.root,
+        rootBaseClassName,
+        rootStyles[state.appearance],
+        state.root.className,
+    );
+
+    return state;
+};

package/src/Components/Table/useTableStyles.styles.ts

@@ -0,0 +1,35 @@
+import { makeStyles, makeResetStyles, mergeClasses } from 'css-engine-test-pb';
+import { SlotClassNames } from '../../Types/compose/types.js';
+import { TableSlots, TableState } from './Table.types.js';
+import { Tokens } from '../../Theme/tokens.js';
+
+export const tableClassNames: SlotClassNames<TableSlots> = {
+    root: 'Table'
+};
+
+const useRootBaseClassName = makeResetStyles({
+    borderCollapse: 'collapse',
+    width: '100%',
+    fontFamily: Tokens.fontFamilyBase,
+    fontSize: Tokens.fontSize300,
+    lineHeight: Tokens.lineHeight300,
+});
+
+const useRootStyles = makeStyles({
+    small: {},
+    medium: {},
+});
+
+export const useTableStyles = (state: TableState): TableState => {
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+
+    state.root.className = mergeClasses(
+        tableClassNames.root,
+        rootBaseClassName,
+        rootStyles[state.size],
+        state.root.className,
+    );
+
+    return state;
+};

package/src/index.ts

@@ -25,6 +25,54 @@ export type {
     ButtonState
 } from './Components/Button/index.js';
 
+export {
+    Table,
+    useTable,
+    renderTable,
+    useTableStyles,
+    TableHeader,
+    useTableHeader,
+    renderTableHeader,
+    useTableHeaderStyles,
+    TableBody,
+    useTableBody,
+    renderTableBody,
+    useTableBodyStyles,
+    TableRow,
+    useTableRow,
+    renderTableRow,
+    useTableRowStyles,
+    TableHeaderCell,
+    useTableHeaderCell,
+    renderTableHeaderCell,
+    useTableHeaderCellStyles,
+    TableCell,
+    useTableCell,
+    renderTableCell,
+    useTableCellStyles
+} from './Components/Table/index.js';
+
+export type {
+    TableSlots,
+    TableProps,
+    TableState,
+    TableHeaderSlots,
+    TableHeaderProps,
+    TableHeaderState,
+    TableBodySlots,
+    TableBodyProps,
+    TableBodyState,
+    TableRowSlots,
+    TableRowProps,
+    TableRowState,
+    TableHeaderCellSlots,
+    TableHeaderCellProps,
+    TableHeaderCellState,
+    TableCellSlots,
+    TableCellProps,
+    TableCellState
+} from './Components/Table/index.js';
+
 export * from './Types/compose/index.js';
 export * from './Types/utils/index.js';