@newtonschool/grauity 0.0.13 → 0.1.10

package/ui/elements/Table/Table.tsx

@@ -0,0 +1,118 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {
+    StyledTable,
+    StyledTableBody,
+    StyledTableDataCell,
+    StyledTableHead,
+    StyledTableHeadingCell,
+    StyledTableRow,
+} from './Table.styles';
+import { TableProps } from './types';
+
+/**
+ * A table is a component that is used to display data in a tabular format.
+ * It is composed of rows and columns.
+ */
+const Table = ({ rows, columns, ...props }: TableProps) => (
+    <StyledTable
+        borderAround={props.borderAround}
+        borderWithin={props.borderWithin}
+        borderHorizontal={props?.borderHorizontal}
+        borderVertical={props?.borderVertical}
+        striped={props?.striped}
+        className={props?.className}
+        style={props?.style}
+        role="table"
+    >
+        <StyledTableHead
+            capitalizeHeaders={props?.capitalizeHeaders}
+            highlightHeaders={props?.highlightHeaders}
+        >
+            <StyledTableRow condensed={props.condensed}>
+                {columns?.map((column, columnIndex) => (
+                    <StyledTableHeadingCell
+                        key={column?.key || `table--column-${columnIndex + 1}`}
+                        align={column?.align || 'center'}
+                        width={column?.width || 'auto'}
+                        colSpan={column?.colSpan || 1}
+                        rowSpan={column?.rowSpan || 1}
+                    >
+                        {column.display}
+                    </StyledTableHeadingCell>
+                ))}
+            </StyledTableRow>
+        </StyledTableHead>
+
+        <StyledTableBody>
+            {rows?.map((row, rowIndex) => (
+                <StyledTableRow
+                    key={`table--row-${rowIndex + 1}`}
+                    condensed={props.condensed}
+                >
+                    {columns?.map((column) => (
+                        <StyledTableDataCell
+                            key={`table--column-${column.key}--row-${
+                                rowIndex + 1
+                            }`}
+                            align={
+                                row[column.key]?.align ||
+                                column?.align ||
+                                'center'
+                            }
+                            colSpan={row[column.key]?.colSpan || 1}
+                            rowSpan={row[column.key]?.rowSpan || 1}
+                            vAlign={row[column.key]?.vAlign || 'middle'}
+                        >
+                            {row[column.key]?.render
+                                ? row[column.key].render(row[column.key])
+                                : row[column.key]?.display}
+                        </StyledTableDataCell>
+                    ))}
+                </StyledTableRow>
+            ))}
+        </StyledTableBody>
+    </StyledTable>
+);
+
+Table.propTypes = {
+    rows: PropTypes.array,
+    columns: PropTypes.array,
+    condensed: PropTypes.bool,
+    striped: PropTypes.bool,
+    borderAround: PropTypes.bool,
+    borderWithin: PropTypes.bool,
+    borderHorizontal: PropTypes.bool,
+    borderVertical: PropTypes.bool,
+    className: PropTypes.string,
+    loading: PropTypes.bool,
+    style: PropTypes.object,
+    capitalizeHeaders: PropTypes.bool,
+    highlightHeaders: PropTypes.bool,
+};
+
+Table.defaultProps = {
+    rows: [],
+    columns: [],
+    condensed: true,
+    striped: false,
+    borderAround: true,
+    borderWithin: true,
+    borderHorizontal: true,
+    borderVertical: true,
+    className: '',
+    loading: false,
+    style: {},
+    capitalizeHeaders: false,
+    highlightHeaders: true,
+};
+
+Table.Table = StyledTable;
+Table.TableBody = StyledTableBody;
+Table.TableDataCell = StyledTableDataCell;
+Table.TableHead = StyledTableHead;
+Table.TableHeadingCell = StyledTableHeadingCell;
+Table.TableRow = StyledTableRow;
+
+export default Table;

package/ui/elements/Table/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Table';
+export type { TableProps } from './types';

package/ui/elements/Table/types.ts

@@ -0,0 +1,270 @@
+import React, { ReactNode } from 'react';
+
+import { grauityIconName } from '../../core';
+
+export interface TableColumn {
+    /**
+     * Column key
+     * */
+    key: string;
+
+    /**
+     * Column display name
+     * */
+    display: string;
+
+    /**
+     * Column width
+     * */
+    width?: string;
+
+    /**
+     * Column alignment, default is center
+     * */
+    align?: 'left' | 'right' | 'center';
+
+    /**
+     * Row span, default is 1
+     * */
+    rowSpan?: number;
+
+    /**
+     * Col span, default is 1
+     * */
+    colSpan?: number;
+}
+
+export interface TableCellInterface {
+    /**
+     * Cell display, can be a string or a React element
+     * */
+    display?: ReactNode;
+
+    /**
+     * Custom cell render function. If provided, display will be ignored
+     * */
+    render?: (args: TableCellInterface) => ReactNode;
+
+    /**
+     * Row vertical alignment, default is top
+     * */
+    vAlign?: 'top' | 'bottom' | 'middle';
+
+    /**
+     * Row span, default is 1
+     * */
+    rowSpan?: number;
+
+    /**
+     * Col span, default is 1
+     * */
+    colSpan?: number;
+
+    /**
+     * Row actions (rendered as buttons by default)
+     * */
+    actions?: TableCellAction[];
+
+    /**
+     * Row alignment
+     * */
+    align?: 'left' | 'right' | 'center';
+}
+
+export interface TableCellAction {
+    /**
+     * Action key
+     * */
+    key: string;
+
+    /**
+     * Action display, can be a string or a React element
+     * */
+    display: any;
+
+    /**
+     * Action icon
+     * */
+    icon?: grauityIconName;
+
+    /**
+     * Action type, can be a button or a link, default is button
+     * */
+    as?: 'button' | 'link';
+
+    /**
+     * Action href, only used if the action type is link
+     * */
+    href?: string;
+
+    /**
+     * Action click handler
+     * */
+    handleClick?: (data: any) => void;
+}
+
+export interface TableRow {
+    /**
+     * Table data, in JS Object format, with table column keys as keys of object
+     */
+    [columnKey: string]: TableCellInterface;
+}
+
+export interface TableColumnRow {
+    /**
+     * Row key
+     * */
+    key: string;
+
+    /**
+     * Row cells
+     * */
+    cells: TableColumn[];
+}
+
+export interface TableProps {
+    /**
+     * Table columns, see type `TableColumn`
+     * */
+    columns?: TableColumn[];
+
+    /**
+     * Table rows, see type `TableRow`
+     * */
+    rows?: TableRow[];
+
+    /**
+     * Determines if the table is condensed (Reduced padding).
+     * Available choices: true, false
+     *
+     * Default: `true`
+     * */
+    condensed?: boolean;
+
+    /**
+     * Are alternate rows striped (shaded).
+     * Available choices: true, false
+     *
+     * Default: `false`
+     * */
+    striped?: boolean;
+
+    /**
+     * Determines if the table has a border around it.
+     * Available choices: true, false
+     *
+     * Default: `true`
+     * */
+    borderAround?: boolean;
+
+    /**
+     * Determines if the table has a border between rows.
+     * Available choices: true, false
+     *
+     * Has more precedence than `borderHorizontal` and `borderVertical`.
+     *
+     * Default: `true`
+     * */
+    borderWithin?: boolean;
+
+    /**
+     * Determines if the table has a border between columns.
+     *
+     * Default: `true`
+     * */
+    borderHorizontal?: boolean;
+
+    /**
+     * Determines if the table has a border between rows.
+     *
+     * Default: `true`
+     * */
+    borderVertical?: boolean;
+
+    /**
+     * Additional classes to be added to the component.
+     * */
+    className?: string;
+
+    /**
+     * Show that the table is loading
+     *
+     * Default: `false`
+     * */
+    loading?: boolean;
+
+    /**
+     * Additional styles to be used over the element
+     *
+     * Default: `{}`
+     * */
+    style?: React.CSSProperties;
+
+    /**
+     * Capitalize the header
+     *
+     * Default: `true`
+     * */
+    capitalizeHeaders?: boolean;
+
+    /**
+     * Determines if table headers should be highlighted
+     *
+     * Default: `true`
+     * */
+    highlightHeaders?: boolean;
+}
+
+// Interface for NSTableWrapper component props
+export interface TableComponentProps {
+    borderAround?: boolean;
+    borderWithin?: boolean;
+    borderHorizontal?: boolean;
+    borderVertical?: boolean;
+    striped?: boolean;
+    children: ReactNode;
+    role?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+// Interface for NSTableHead component props
+export interface TableHeadComponentProps {
+    capitalizeHeaders?: boolean;
+    highlightHeaders?: boolean;
+    children: ReactNode;
+}
+
+// Interface for NSTableBody component props
+export interface TableBodyComponentProps {
+    children: ReactNode;
+}
+
+// Interface for NSTableRow component props
+export interface TableRowComponentProps {
+    key?: string;
+    condensed?: boolean;
+    children: ReactNode;
+}
+
+// Interface for NSTableDataCell component props
+export interface TableDataCellComponentProps {
+    key?: string;
+    align?: string;
+    vAlign?: string;
+    flexAlign?: string;
+    colSpan?: number;
+    rowSpan?: number;
+    children: ReactNode;
+}
+
+// Interface for NSTableHeadingCell component props
+export interface TableHeadingCellComponentProps {
+    key?: string;
+    align?: string;
+    width?: string;
+    flexAlign?: string;
+    colSpan?: number;
+    rowSpan?: number;
+    children: ReactNode;
+}

package/ui/elements/Typography/Typography.styles.ts

@@ -0,0 +1,29 @@
+import styled, { css } from 'styled-components';
+
+import { StyledTypographyInterface } from './types';
+import { getTypographyVariantStyles } from './utils';
+
+export const StyledTypography = styled.p.attrs(
+    (props: StyledTypographyInterface) => ({
+        as: props.as || 'p',
+    })
+)<StyledTypographyInterface>`
+    margin: 0;
+    padding: 0;
+
+    font-family: var(--font-family, 'Mona Sans');
+    color: var(--text-primary, #16191d);
+
+    ${({ variant }) =>
+        css`
+            ${getTypographyVariantStyles(variant)}
+        `};
+
+    ${({ textAlign }) => textAlign && `text-align: ${textAlign};`}
+    ${({ textTransform }) =>
+        textTransform && `text-transform: ${textTransform};`}
+    ${({ fontSize }) => fontSize && `font-size: ${fontSize};`}
+    ${({ color }) => color && `color: ${color};`};
+`;
+
+export default StyledTypography;

package/ui/elements/Typography/Typography.tsx

@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {
+    TYPOGRAPHY_AS_ENUM,
+    TYPOGRAPHY_VARIANT_AS_MAPPING,
+    TYPOGRAPHY_VARIANTS,
+} from './constants';
+import { TypographyProps } from './types';
+import { StyledTypography } from './Typography.styles';
+
+/**
+ * A typography component can be used to display text in different styles.
+ *
+ * Use the prop `variant` to select the style of the text.
+ *
+ * By default, prop `as` is set to `'auto'`, and the component will automatically
+ * select the HTML tag based on the prop `variant`.
+
+ * If you want the text to be rendered as a different HTML tag, provide your desired 
+ * value to prop `as`, such as `'h1'`, `'h2'`, `'p'`, etc.
+ */
+const Typography = ({
+    variant,
+    as,
+    color,
+    textAlign,
+    textTransform,
+    fontSize,
+    children = '',
+}: TypographyProps) => {
+    const asType =
+        as === TYPOGRAPHY_AS_ENUM.AUTO
+            ? TYPOGRAPHY_VARIANT_AS_MAPPING[variant]
+            : as;
+    return (
+        <StyledTypography
+            variant={variant}
+            as={asType}
+            color={color}
+            textAlign={textAlign}
+            textTransform={textTransform}
+            fontSize={fontSize}
+        >
+            {children}
+        </StyledTypography>
+    );
+};
+
+Typography.propTypes = {
+    variant: PropTypes.oneOf(TYPOGRAPHY_VARIANTS),
+    as: PropTypes.string,
+    color: PropTypes.string,
+    textAlign: PropTypes.string,
+    textTransform: PropTypes.string,
+    fontSize: PropTypes.string,
+    children: PropTypes.any,
+};
+
+Typography.defaultProps = {
+    variant: 'paragraph-medium-body1',
+    as: 'auto',
+    color: 'var(--text-primary, #16191d)',
+    textAlign: null,
+    textTransform: null,
+    fontSize: null,
+    children: 'Enter the text here',
+};
+
+export default Typography;