@newtonschool/grauity 0.0.13 → 0.1.10

package/ui/elements/Modal/types.ts

@@ -0,0 +1,379 @@
+import React from 'react';
+
+import { ButtonVariants } from '../Button/types';
+
+type ModalContentType = React.ReactNode;
+
+interface ModalStep {
+    /**
+     * Banner for the modal, can be a valid React node
+     * */
+    banner?: ModalContentType;
+
+    /**
+     * Title for the modal, can be a valid React node
+     * */
+    title: ModalContentType;
+
+    /**
+     * Description for the modal, can be a string
+     * */
+    description?: string | null;
+
+    /**
+     * Body for the modal, can be a valid React node
+     * */
+    body?: ModalContentType;
+
+    /**
+     * Text for the next button
+     * */
+    nextButtonText?: string;
+
+    /**
+     * Determines if the back button should be shown
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    showBackButton?: boolean;
+
+    /**
+     * Variant for the button
+     * */
+    buttonVariant?: ButtonVariants | null;
+}
+
+export interface ModalProps {
+    /**
+     * Banner for the modal, can be a valid React node
+     * */
+    banner?: ModalContentType;
+
+    /**
+     * Title for the modal, can be a valid React node
+     * */
+    title?: ModalContentType;
+
+    /**
+     * Description for the modal, can be a string
+     * */
+    description?: string;
+
+    /**
+     * Body for the modal, can be a valid React node
+     * */
+    body?: ModalContentType;
+
+    /**
+     * Action for the modal, can be a valid React node
+     * */
+    action?: ModalContentType;
+
+    /**
+     * Determines if the modal should hide on click away
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    hideOnClickAway: boolean;
+
+    /**
+     * Determines if the modal should blur the background
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    blurBackground?: boolean;
+
+    /**
+     * Callback function to be called when the modal is hidden
+     * */
+    onHide?: () => void;
+
+    /**
+     * Determines if the modal should be full width on mobile
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    mobileBottomFullWidth?: boolean;
+
+    /**
+     * Padding for the modal
+     * */
+    modalPadding?: string;
+
+    /**
+     * Margin for the modal body
+     * */
+    modalBodyMargin?: string;
+
+    /**
+     * Width of the modal
+     * */
+    width?: string;
+
+    /**
+     * Height of the modal
+     * */
+    height?: string;
+
+    /**
+     * Minimum height of the modal
+     * */
+    minHeight?: string;
+
+    /**
+     * Determines if the close button should be shown
+     *
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    showCloseButton?: boolean;
+}
+
+export interface MultiStepModalProps {
+    /**
+     * Modal steps
+     * */
+    modalSteps: ModalStep[];
+
+    /**
+     * Determines if the modal should show pagination if there are multiple modal steps
+     * Available choices: true, false
+     *
+     * Default: `true`
+     * */
+    showModalStepsPagination?: boolean;
+
+    /**
+     * Determines if the modal should hide on click away
+     * Available choices: true, false
+     *
+     * Default: `false`
+     * */
+    hideOnClickAway?: boolean;
+
+    /**
+     * Determines if the modal should blur the background
+     * Available choices: true, false
+     *
+     * Default: `false`
+     * */
+    blurBackground?: boolean;
+
+    /**
+     * Callback function to be called when the modal is hidden
+     * */
+    onHide?: () => void;
+
+    /**
+     * Callback function to be called when the final step is reached
+     * */
+    onFinalStep?: () => void;
+
+    /**
+     * Determines if the modal should be full width on mobile
+     * Available choices: true, false
+     *
+     * Default: `false`
+     * */
+    mobileBottomFullWidth?: boolean;
+
+    /**
+     * Callback function to be called when the step changes
+     * */
+    onStepChange?: () => void;
+
+    /**
+     * Determines if the modal buttons should be shown
+     * Available choices: true, false
+     *
+     * Default: `true`
+     * */
+    showModalButtons?: boolean;
+
+    /**
+     * Determines if the modal header should be shown
+     * Available choices: true, false
+     *
+     * Default: `true`
+     * */
+    showHeader?: boolean;
+
+    /**
+     * Padding for the modal
+     * */
+    modalPadding?: string;
+
+    /**
+     * Margin for the modal body
+     * */
+    modalBodyMargin?: string;
+
+    /**
+     * Width of the modal
+     * */
+    width?: string;
+
+    /**
+     * Height of the modal
+     * */
+    height?: string;
+
+    /**
+     * Minimum height of the modal
+     * */
+    minHeight?: string;
+
+    /**
+     * Determines if the close button should be shown
+     *
+     * Available choices: true, false
+     *
+     * NOTE: If Modal has a banner, the close button will be hidden by default
+     *
+     * Default: `false`
+     * */
+    showCloseButton?: boolean;
+}
+
+export interface StyleData {
+    position?: string;
+    backgroundColor?: string;
+}
+
+// Components interface for ModalWrapper
+export interface ModalWrapperProps {
+    blurBackground?: boolean;
+    children: React.ReactNode;
+}
+
+// Components interface for ModalContainer
+export interface ModalContainerProps {
+    width?: string;
+    height?: string;
+    minHeight?: string;
+    mobileBottomFullWidth?: boolean;
+    modalPadding?: string;
+    onClick?: (e: Event) => void;
+    ref?: React.MutableRefObject<any>;
+    children: React.ReactNode;
+    role: string;
+}
+
+// Components interface for ModalTitle
+export interface ModalTitleProps {
+    id: string;
+    children: React.ReactNode;
+}
+
+// Components interface for ModalDescription
+export interface ModalDescriptionProps {
+    id: string;
+    children: React.ReactNode;
+}
+
+// Components interface for ModalBody
+export interface ModalBodyProps {
+    modalBodyMargin?: string;
+    children: React.ReactNode;
+}
+
+// Components interface for ModalBodyMain
+export interface ModalBodyMainProps {
+    children: React.ReactNode;
+}
+
+// Components interface for ModalPaginationItemProps
+export interface ModalPaginationItemProps {
+    key: string | number;
+    active: boolean;
+    onClick: () => void;
+}
+
+export interface ConfirmationDialogProps {
+    /**
+     * Text for the cancel button
+     * */
+    cancelText?: string;
+
+    /**
+     * Text for the confirm button
+     * */
+    confirmText?: string;
+
+    /**
+     * Callback function to be called when the cancel button is clicked
+     * */
+    onCancel: () => void;
+
+    /**
+     * Callback function to be called when the confirm button is clicked
+     * */
+    onConfirm: () => void;
+
+    /**
+     * Banner for the modal, can be a valid React node
+     * */
+    banner?: ModalContentType;
+
+    /**
+     * Title for the modal, can be a valid React node
+     * */
+    title?: ModalContentType;
+
+    /**
+     * Description for the modal, can be a string
+     * */
+    description?: string;
+
+    /**
+     * Body for the modal, can be a valid React node
+     * */
+    body?: ModalContentType;
+
+    /**
+     * Variant for the cancel button
+     * */
+    cancelButtonVariant?: ButtonVariants;
+
+    /**
+     * Variant for the confirm button
+     * */
+    confirmButtonVariant?: ButtonVariants;
+
+    /**
+     * Determines if the close button should be shown
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    showCloseButton?: boolean;
+
+    /**
+     * Determines if the modal should hide on click away
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    hideOnClickAway?: boolean;
+
+    /**
+     * Determines if the modal should blur the background
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    blurBackground?: boolean;
+
+    /**
+     * Determines if the modal should be at bottom with full width on mobile
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    mobileBottomFullWidth?: boolean;
+}

package/ui/elements/Table/Table.styles.ts

@@ -0,0 +1,178 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import styled, { css } from 'styled-components';
+
+import {
+    TableBodyComponentProps,
+    TableComponentProps,
+    TableDataCellComponentProps,
+    TableHeadComponentProps,
+    TableHeadingCellComponentProps,
+    TableRowComponentProps,
+} from './types';
+
+export const StyledTableDataCell = styled.td<TableDataCellComponentProps>`
+    color: var(--text-primary, #16191d);
+    font-size: var(--font-size-12px, 12px);
+    font-weight: var(--font-weight-450, 450);
+    line-height: 120%;
+    letter-spacing: 0.4px;
+    padding: var(--spacing-10px, 10px);
+
+    &:last-of-type {
+        border-right: none;
+    }
+
+    ${({ align }) => align && `text-align: ${align};`}
+
+    ${({ flexAlign }) =>
+        flexAlign &&
+        css`
+            display: flex;
+            flex-direction: row;
+            align-items: ${flexAlign};
+        `}
+
+    ${({ vAlign }) => vAlign && `vertical-align: ${vAlign};`}
+`;
+
+export const StyledTableHeadingCell = styled.th<TableHeadingCellComponentProps>`
+    color: var(--text-secondary, #5b6271);
+    font-size: var(--font-size-12px, 12px);
+    font-weight: var(--font-weight-550, 550);
+    line-height: 120%;
+    letter-spacing: 0.4px;
+    padding: var(--spacing-10px, 10px);
+
+    ${({ align }) => `text-align: ${align};`}
+`;
+
+export const StyledTableRow = styled.tr<TableRowComponentProps>`
+    ${({ condensed }) =>
+        !condensed &&
+        css`
+            ${StyledTableDataCell} {
+                padding: 18px;
+            }
+            ${StyledTableHeadingCell} {
+                padding: 18px;
+            }
+        `}
+
+    &:last-of-type ${StyledTableDataCell}:first-of-type {
+        border-bottom-left-radius: var(--corner-radius-8px, 8px);
+    }
+
+    &:last-of-type ${StyledTableDataCell}:last-of-type {
+        border-bottom-right-radius: var(--corner-radius-8px, 8px);
+    }
+`;
+
+export const StyledTable = styled.table<TableComponentProps>`
+    border-collapse: collapse;
+    font-size: var(--font-size-12px, 12px);
+    width: 100%;
+    border-radius: var(--corner-radius-10px, 10px);
+    overflow: hidden;
+    outline: var(--spacing-1px, 1px) solid var(--border, #e1e5ea);
+    font-family: var(--font-family, 'Mona Sans');
+
+    ${StyledTableRow}:not(:last-child) {
+        border-bottom: var(--spacing-1px, 1px) solid var(--border, #e1e5ea);
+    }
+    ${StyledTableDataCell}:not(:last-child) {
+        border-right: var(--spacing-1px, 1px) solid var(--border, #e1e5ea);
+    }
+    ${StyledTableHeadingCell} {
+        border-right: var(--spacing-1px, 1px) solid var(--border, #e1e5ea);
+        border-bottom: var(--spacing-1px, 1px) solid var(--border, #e1e5ea);
+    }
+
+    ${({ borderAround }) =>
+        borderAround === false &&
+        css`
+            outline: none;
+            ${StyledTableDataCell}:last-of-type {
+                border-right: none;
+            }
+        `}
+
+    ${({ borderHorizontal }) =>
+        borderHorizontal === false &&
+        css`
+            ${StyledTableRow} {
+                border-bottom: none !important;
+            }
+            ${StyledTableDataCell} {
+                border-bottom: none;
+            }
+            ${StyledTableHeadingCell} {
+                border-bottom: none;
+            }
+        `}
+
+    ${({ borderVertical }) =>
+        borderVertical === false &&
+        css`
+            ${StyledTableRow} {
+                border-right: none !important;
+            }
+            ${StyledTableDataCell} {
+                border-right: none !important;
+            }
+            ${StyledTableHeadingCell} {
+                border-right: none;
+            }
+        `}
+
+    ${({ borderWithin }) =>
+        borderWithin === false &&
+        css`
+            ${StyledTableRow} {
+                border-bottom: none !important;
+                border-right: none !important;
+            }
+            ${StyledTableDataCell} {
+                border-bottom: none !important;
+                border-right: none !important;
+            }
+            ${StyledTableHeadingCell} {
+                border-bottom: none !important;
+                border-right: none !important;
+            }
+        `}
+
+
+    ${({ striped }) =>
+        striped &&
+        css`
+            ${StyledTableBody} ${StyledTableRow}:nth-child(even) {
+                background-color: var(--bg-secondary, #f6f7f9);
+            }
+        `}
+`;
+
+export const StyledTableHead = styled.thead<TableHeadComponentProps>`
+    background: var(--bg-secondary, #f6f7f9);
+
+    ${({ highlightHeaders }) =>
+        highlightHeaders === false && 'background: var(--bg-primary, #ffffff);'}
+
+    ${({ capitalizeHeaders }) =>
+        capitalizeHeaders !== false && 'text-transform: uppercase;'}
+
+    ${StyledTableRow} ${StyledTableHeadingCell}:last-child {
+        border-right: none;
+    }
+
+    ${StyledTableRow}:first-child ${StyledTableHeadingCell}:first-child {
+        border-top-left-radius: var(--corner-radius-8px, 8px);
+    }
+
+    ${StyledTableRow}:first-child ${StyledTableHeadingCell}&:last-child {
+        border-top-right-radius: var(--corner-radius-8px, 8px);
+    }
+`;
+
+export const StyledTableBody = styled.tbody<TableBodyComponentProps>`
+    background-color: var(--bg-primary, #fff);
+`;

package/ui/elements/Table/Table.test.tsx

@@ -0,0 +1,72 @@
+import '@testing-library/jest-dom';
+
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import Table from '.';
+import { TableProps } from './types';
+
+describe('Table', () => {
+    const columns: TableProps['columns'] = [
+        { key: 'col1', display: 'Column 1' },
+        { key: 'col2', display: 'Column 2' },
+        { key: 'col3', display: 'Column 3' },
+    ];
+
+    const rows: TableProps['rows'] = [
+        {
+            col1: { display: 'Row 1, Cell 1' },
+            col2: { display: 'Row 1, Cell 2' },
+            col3: { display: 'Row 1, Cell 3' },
+        },
+        {
+            col1: { display: 'Row 2, Cell 1' },
+            col2: { display: 'Row 2, Cell 2' },
+            col3: { display: 'Row 2, Cell 3' },
+        },
+    ];
+
+    it('renders table with columns and rows', () => {
+        render(<Table columns={columns} rows={rows} />);
+
+        columns.forEach((column) => {
+            expect(screen.getByText(column.display)).toBeInTheDocument();
+        });
+
+        rows.forEach((row) => {
+            Object.values(row).forEach((cell) => {
+                expect(screen.getByText(cell.display as string)).toBeInTheDocument();
+            });
+        });
+    });
+
+
+    it('renders custom cell content using render function', () => {
+        const customRows: TableProps['rows'] = [
+            {
+                col1: { render: () => <span>Custom Cell 1</span> },
+                col2: { display: 'Row 1, Cell 2' },
+                col3: { display: 'Row 1, Cell 3' },
+            },
+        ];
+
+        render(<Table columns={columns} rows={customRows} />);
+
+        expect(screen.getByText('Custom Cell 1')).toBeInTheDocument();
+    });
+
+    it('applies custom styles and classes', () => {
+        render(
+            <Table
+                columns={columns}
+                rows={rows}
+                className="custom-class"
+                style={{ backgroundColor: 'red' }}
+            />
+        );
+
+        const tableElement = screen.getByRole('table');
+        expect(tableElement).toHaveClass('custom-class');
+        expect(tableElement).toHaveStyle('background-color: red');
+    });
+});