@newtonschool/grauity 0.1.10 → 1.0.0

package/ui/elements/Table/Table.tsx

@@ -1,118 +0,0 @@
-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

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

package/ui/elements/Table/types.ts

@@ -1,270 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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;