@leav/ui 0.0.1-alpha-2 → 0.0.1-alpha-3

package/src/components/EntityCard/EntityCard.test.tsx

@@ -1,50 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import 'jest-styled-components';
-import {render, screen} from '../../_tests/testUtils';
-import EntityCard from './EntityCard';
-
-describe('EntityCard', () => {
-    const mockEntity = {
-        label: 'Some entity',
-        subLabel: 'Some sub label',
-        color: 'orange',
-        preview: 'https://some.url'
-    };
-
-    test('Display full entity card', async () => {
-        render(<EntityCard entity={mockEntity} />);
-
-        expect(screen.getByText(mockEntity.label)).toBeInTheDocument();
-        expect(screen.getByText(mockEntity.subLabel)).toBeInTheDocument();
-        expect(screen.getByRole('img', {hidden: true})).toHaveAttribute('src', mockEntity.preview);
-        expect(screen.getByTestId('entity-card')).toHaveStyleRule('border-left', `5px solid ${mockEntity.color}`);
-    });
-
-    test('Can hide sub-label', async () => {
-        render(<EntityCard entity={mockEntity} withSubLabel={false} />);
-
-        expect(screen.queryByText(mockEntity.subLabel)).not.toBeInTheDocument();
-    });
-
-    test('Can hide preview', async () => {
-        render(<EntityCard entity={mockEntity} withPreview={false} />);
-
-        expect(screen.queryByRole('img', {hidden: true})).not.toBeInTheDocument();
-    });
-
-    test('Can hide color', async () => {
-        render(<EntityCard entity={mockEntity} withColor={false} />);
-
-        expect(screen.getByTestId('entity-card')).not.toHaveStyle({
-            borderLeft: `5px solid ${mockEntity.color}`
-        });
-    });
-
-    test('Display initials if no preview supplied', async () => {
-        render(<EntityCard entity={{...mockEntity, preview: null}} />);
-
-        expect(screen.getByText('SE')).toBeInTheDocument();
-    });
-});

package/src/components/EntityCard/EntityCard.tsx

@@ -1,177 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {Typography} from 'antd';
-import styled, {CSSObject} from 'styled-components';
-import {getPreviewSize} from '_ui/_utils';
-import {PreviewSize} from '../../constants';
-import {EntityPreview} from '../EntityPreview';
-import {IEntityData} from './_types';
-
-interface IEntityCardProps {
-    entity: IEntityData;
-    size?: PreviewSize;
-    style?: React.CSSProperties & CSSObject;
-    previewStyle?: React.CSSProperties & CSSObject;
-    tile?: boolean;
-    simplistic?: boolean;
-    withPreview?: boolean;
-    withSubLabel?: boolean;
-    withColor?: boolean;
-}
-
-interface IWrapperProps {
-    $color: string | null;
-    $size: PreviewSize;
-    $withPreview: boolean;
-    $withSubLabel: boolean;
-    $withColor: boolean;
-    $tile: boolean;
-    style?: React.CSSProperties & CSSObject;
-    $simplistic?: boolean;
-}
-
-const _getGridTemplateAreas = (withPreview: boolean, withSubLabel: boolean, tile: boolean): string => {
-    if (tile) {
-        if (withPreview) {
-            if (withSubLabel) {
-                return `
-                    'preview'
-                    'label'
-                    'sub-label'
-                `;
-            }
-            return `
-                'preview'
-                'label'
-            `;
-        }
-
-        if (withSubLabel) {
-            return `
-                'label'
-                'sub-label'
-            `;
-        }
-
-        return "'label'";
-    } else {
-        if (withPreview) {
-            if (withSubLabel) {
-                return `
-                    'preview label'
-                    'preview sub-label'
-                `;
-            }
-
-            return `
-                'preview label'
-            `;
-        }
-
-        if (withSubLabel) {
-            return `
-                'label'
-                'sub-label'
-            `;
-        }
-
-        return "'label'";
-    }
-};
-
-const marginBySize: Record<PreviewSize, string> = {
-    [PreviewSize.tiny]: '0.3rem',
-    [PreviewSize.small]: '0.5rem',
-    [PreviewSize.medium]: '0.8rem',
-    [PreviewSize.big]: '0.8rem'
-};
-
-const Wrapper = styled.div<IWrapperProps>`
-    border-left: ${props => (props.$withColor ? `5px solid ${props.$color ? props.$color : 'transparent'}` : 'none')};
-    display: grid;
-    grid-template-areas: ${props => _getGridTemplateAreas(props.$withPreview, props.$withSubLabel, props.$tile)};
-
-    grid-template-columns: ${props => {
-        if (!props.$withPreview || props.$tile) {
-            return '100%';
-        }
-
-        const previewSize = getPreviewSize(props.$size, props?.$simplistic ?? false);
-        const previewColSize = `calc(${previewSize} + calc(2*${marginBySize[props.$size]}))`;
-        return `${previewColSize} calc(100% - ${previewColSize})`;
-    }};
-`;
-
-const PreviewWrapper = styled.div<{$tile: boolean; $size: PreviewSize}>`
-    grid-area: preview;
-    margin: ${props => (props.$tile ? '0.3rem 0' : `0 ${marginBySize[props.$size]}`)};
-    justify-self: center;
-`;
-
-const EntityLabel = styled.div<{$simplistic: boolean; $withSubLabel: boolean}>`
-    grid-area: label;
-    font-weight: bold;
-    overflow: hidden;
-    align-self: ${props => (props.$simplistic || !props.$withSubLabel ? 'center' : 'end')};
-    line-height: 1.3em;
-`;
-
-const SubLabel = styled.div`
-    grid-area: sub-label;
-    font-weight: normal;
-    color: rgba(0, 0, 0, 0.4);
-    font-size: 0.9em;
-    line-height: 1.3em;
-`;
-
-function EntityCard({
-    entity,
-    size = PreviewSize.medium,
-    tile = false,
-    simplistic = false,
-    withColor = true,
-    withSubLabel = true,
-    withPreview = true,
-    style,
-    previewStyle
-}: IEntityCardProps): JSX.Element {
-    return (
-        <Wrapper
-            data-testid="entity-card"
-            $color={entity.color}
-            style={style}
-            $size={size}
-            $withPreview={withPreview}
-            $withColor={withColor}
-            $withSubLabel={withSubLabel}
-            $tile={tile}
-            $simplistic={simplistic}
-        >
-            {withPreview && (
-                <PreviewWrapper className="preview" $tile={tile} $size={size}>
-                    <EntityPreview
-                        label={entity.label}
-                        color={entity.color}
-                        image={entity.preview}
-                        size={size}
-                        style={previewStyle}
-                        tile={tile}
-                        simplistic={simplistic}
-                    />
-                </PreviewWrapper>
-            )}
-            <EntityLabel className="label" $simplistic={simplistic} $withSubLabel={withSubLabel}>
-                <Typography.Paragraph
-                    ellipsis={{rows: 1, tooltip: entity.label}}
-                    style={{marginBottom: 0, color: style?.color ?? null}}
-                >
-                    {entity.label}
-                </Typography.Paragraph>
-            </EntityLabel>
-            {withSubLabel && <SubLabel className="sub-label">{entity.subLabel}</SubLabel>}
-        </Wrapper>
-    );
-}
-
-export default EntityCard;

package/src/components/EntityCard/_types.ts

@@ -1,9 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-export interface IEntityData {
-    color: string | null;
-    preview: string | null;
-    label: string;
-    subLabel: string | null;
-}

package/src/components/EntityCard/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-export {default as EntityCard} from './EntityCard';
-export * from './_types';

package/src/components/EntityPreview/EntityPreview.test.tsx

@@ -1,50 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import '@testing-library/jest-dom';
-import 'jest-styled-components';
-import {act, fireEvent, render, screen} from '_ui/_tests/testUtils';
-import EntityPreview from './EntityPreview';
-
-describe('RecordPreview', () => {
-    test('Show an image, first placeholder then image when its loaded', async () => {
-        render(<EntityPreview image="http://fake-image-url.com" label="TestLabel" tile />);
-
-        const imageElem = screen.getByAltText('record preview');
-        expect(imageElem).toBeInTheDocument();
-        expect(imageElem).toHaveStyleRule('display', 'none');
-
-        await act(async () => {
-            fireEvent.load(imageElem);
-        });
-
-        expect(imageElem).toHaveStyleRule('display', 'block');
-    });
-
-    test('Show initial with color if no image', async () => {
-        await act(async () => {
-            render(<EntityPreview color="#FF0000" label="TestLabel" />);
-        });
-
-        expect(screen.queryByRole('image')).not.toBeInTheDocument();
-        expect(screen.getByTestId('generated-preview')).toBeInTheDocument();
-        expect(screen.getByTestId('generated-preview')).toHaveTextContent('TE');
-        expect(screen.getByTestId('generated-preview')).toHaveStyleRule('background-color', '#FF0000');
-    });
-
-    test('Show initial with random color if no color', async () => {
-        await act(async () => {
-            render(<EntityPreview label="TestLabel" />);
-        });
-
-        expect(screen.getByTestId('generated-preview')).toHaveStyleRule('background-color', /.*/);
-    });
-
-    test('Can show simplistic preview', async () => {
-        render(<EntityPreview color="#FF0000" label="TestLabel" simplistic />);
-
-        expect(screen.queryByRole('image')).not.toBeInTheDocument();
-        expect(screen.getByTestId('simplistic-preview')).toBeInTheDocument();
-        expect(screen.getByTestId('simplistic-preview')).toHaveTextContent('T');
-    });
-});

package/src/components/EntityPreview/EntityPreview.tsx

@@ -1,17 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import React from 'react';
-import EntityPreviewList from './EntityPreviewList';
-import EntityPreviewTile from './EntityPreviewTile';
-import {IEntityPreviewProps} from './_types';
-
-const comp = React.memo(function EntityPreview(props: IEntityPreviewProps): JSX.Element {
-    if (props.tile) {
-        return <EntityPreviewTile {...props} />;
-    }
-
-    return <EntityPreviewList {...props} />;
-});
-
-export default comp;

package/src/components/EntityPreview/EntityPreviewList/EntityPreviewList.tsx

@@ -1,106 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {getInitials, getInvertColor, stringToColor} from '@leav/utils';
-import {Skeleton} from 'antd';
-import {useState} from 'react';
-import styled, {CSSObject} from 'styled-components';
-import {getPreviewSize} from '_ui/_utils';
-import {PreviewSize} from '../../../constants';
-import {IEntityPreviewProps, IGeneratedPreviewProps} from '../_types';
-import SimplisticEntityPreview from './SimplisticEntityPreview';
-
-interface IImagePreviewProps {
-    size?: PreviewSize;
-    style?: CSSObject;
-}
-
-const GeneratedPreview = styled.div<IGeneratedPreviewProps>`
-    ${props => props.style || ''}
-    background-color: ${props => props.$bgColor};
-    color: ${props => props.$fontColor};
-    font-size: ${({$size: size}) => `calc(${getPreviewSize(size)} / 2.6)`};
-    height: ${({$size: size}) => getPreviewSize(size)};
-    width: ${({$size: size}) => getPreviewSize(size)};
-    padding: 5px;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    border-radius: 50%;
-`;
-GeneratedPreview.displayName = 'GeneratedPreview';
-
-const ImagePreview = styled.div<IImagePreviewProps>`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: ${({size}) => getPreviewSize(size)};
-    width: ${({size}) => getPreviewSize(size)};
-    overflow: hidden;
-    border-radius: 50%;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-`;
-ImagePreview.displayName = 'ImagePreview';
-
-const Image = styled.img<{$loaded: boolean}>`
-    display: ${p => (p.$loaded ? 'block' : 'none')};
-`;
-
-function EntityPreviewList({label, color, image, size, style, simplistic = false}: IEntityPreviewProps): JSX.Element {
-    const [imageLoaded, setImageLoaded] = useState(false);
-
-    if (simplistic) {
-        return <SimplisticEntityPreview label={label} />;
-    }
-
-    if (image) {
-        return (
-            <ImagePreview size={size} style={style}>
-                {!imageLoaded && (
-                    <Skeleton.Image
-                        style={{
-                            width: '65%',
-                            height: '65%',
-                            background: 'none',
-                            margin: 'auto'
-                        }}
-                    />
-                )}
-                <Image
-                    role="img"
-                    $loaded={imageLoaded}
-                    src={image}
-                    alt="record preview"
-                    onLoad={() => setImageLoaded(true)}
-                    style={{
-                        maxHeight: 'auto',
-                        maxWidth: 'auto',
-                        width: '100%',
-                        height: '100%',
-                        objectFit: 'cover',
-                        ...style
-                    }}
-                />
-            </ImagePreview>
-        );
-    }
-
-    const bgColor = color || stringToColor(label);
-    const fontColor = getInvertColor(bgColor);
-
-    return (
-        <GeneratedPreview
-            data-testid="generated-preview"
-            className="initial"
-            $bgColor={bgColor}
-            $fontColor={fontColor}
-            $size={size}
-            style={{...style}}
-        >
-            {getInitials(label)}
-        </GeneratedPreview>
-    );
-}
-
-export default EntityPreviewList;

package/src/components/EntityPreview/EntityPreviewList/SimplisticEntityPreview/SimplisticEntityPreview.tsx

@@ -1,34 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {getInitials} from '@leav/utils';
-import styled from 'styled-components';
-import {themeVars} from '_ui/antdTheme';
-import {getPreviewSize} from '_ui/_utils';
-
-interface ISimplisticEntityPreviewProps {
-    label: string;
-}
-
-const Wrapper = styled.div<{$size?: string}>`
-    border-radius: 50%;
-    border: 1px solid ${themeVars.borderColor};
-    width: ${props => `calc(${props.$size} + 0.5rem)`};
-    height: ${props => `calc(${props.$size} + 0.5rem)`};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-`;
-
-function SimplisticEntityPreview({label}: ISimplisticEntityPreviewProps): JSX.Element {
-    const initial = getInitials(label, 1);
-    const previewSize = getPreviewSize(null, true);
-
-    return (
-        <Wrapper $size={previewSize} data-testid="simplistic-preview">
-            {initial}
-        </Wrapper>
-    );
-}
-
-export default SimplisticEntityPreview;

package/src/components/EntityPreview/EntityPreviewList/SimplisticEntityPreview/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import SimplisticEntityPreview from './SimplisticEntityPreview';
-export default SimplisticEntityPreview;

package/src/components/EntityPreview/EntityPreviewList/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import EntityPreviewList from './EntityPreviewList';
-export default EntityPreviewList;

package/src/components/EntityPreview/EntityPreviewTile/EntityPreviewTile.tsx

@@ -1,105 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {getInitials, getInvertColor, stringToColor} from '@leav/utils';
-import {useState} from 'react';
-import styled, {CSSObject} from 'styled-components';
-import {themeVars} from '../../../antdTheme';
-import {ImageLoading} from '../../ImageLoading';
-import {ImageMissing} from '../../ImageMissing';
-import {IEntityPreviewProps, IGeneratedPreviewProps} from '../_types';
-
-interface IImagePreviewTileProps {
-    style?: CSSObject;
-}
-
-const ImagePreviewWrapper = styled.div<IImagePreviewTileProps>`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-    border-radius: 0.25rem 0.25rem 0 0;
-    width: fit-content;
-    height: fit-content;
-    margin: auto;
-    background: ${themeVars.imageDefaultBackground};
-
-    && img {
-        max-width: 100%;
-        max-height: 100%;
-        border-radius: 0;
-    }
-`;
-ImagePreviewWrapper.displayName = 'ImagePreviewTile';
-
-const ImageComp = styled.img<{$loaded: boolean}>`
-    display: ${p => (p.$loaded ? 'block' : 'none')};
-    border: 1px solid ${themeVars.borderColor};
-`;
-
-const GeneratedPreviewTile = styled.div<IGeneratedPreviewProps>`
-    ${props => props.style || ''}
-    background-color: ${props => props.$bgColor};
-    color: ${props => props.$fontColor};
-    font-size: 4em;
-    padding: 5px;
-    height: 10rem;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    border-radius: 0.25rem 0.25rem 0 0;
-`;
-GeneratedPreviewTile.displayName = 'GeneratedPreviewTile';
-
-function RecordPreviewTile({
-    label,
-    color,
-    image,
-    style,
-    imageStyle,
-    placeholderStyle
-}: IEntityPreviewProps): JSX.Element {
-    const [imageLoaded, setImageLoaded] = useState(false);
-    const [hasFailed, setHasFailed] = useState(false);
-
-    if (image) {
-        return (
-            <ImagePreviewWrapper style={{position: 'relative', ...style}}>
-                {!imageLoaded && <ImageLoading />}
-                {!hasFailed ? (
-                    <ImageComp
-                        $loaded={imageLoaded}
-                        src={image}
-                        alt="record preview"
-                        style={{...imageStyle}}
-                        onLoad={() => setImageLoaded(true)}
-                        onError={() => {
-                            setImageLoaded(true);
-                            setHasFailed(true);
-                        }}
-                    />
-                ) : (
-                    <ImageMissing style={{...style}} />
-                )}
-            </ImagePreviewWrapper>
-        );
-    }
-
-    const bgColor = color || stringToColor(label);
-    const fontColor = getInvertColor(bgColor);
-
-    return (
-        <GeneratedPreviewTile
-            data-testid="generated-preview"
-            className="initial"
-            $bgColor={bgColor}
-            $fontColor={fontColor}
-            style={placeholderStyle}
-        >
-            {getInitials(label)}
-        </GeneratedPreviewTile>
-    );
-}
-
-export default RecordPreviewTile;

package/src/components/EntityPreview/EntityPreviewTile/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import EntityPreviewTile from './EntityPreviewTile';
-export default EntityPreviewTile;

package/src/components/EntityPreview/_types.ts

@@ -1,25 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {CSSObject} from 'styled-components';
-import {PreviewSize} from '../../constants';
-
-export interface IEntityPreviewProps {
-    label: string;
-    color?: string;
-    image?: string;
-    style?: React.CSSProperties & CSSObject;
-    imageStyle?: React.CSSProperties & CSSObject;
-    placeholderStyle?: React.CSSProperties & CSSObject;
-    tile?: boolean;
-    size?: PreviewSize;
-    simplistic?: boolean;
-}
-
-export interface IGeneratedPreviewProps {
-    $bgColor: string;
-    $fontColor: string;
-    $size?: PreviewSize;
-    style?: React.CSSProperties & CSSObject;
-    $simplistic?: boolean;
-}

package/src/components/EntityPreview/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-export {default as EntityPreview} from './EntityPreview';
-export * from './_types';

package/src/components/ErrorBoundary/ErrorBoundary.test.tsx

@@ -1,43 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {Button} from 'antd';
-import {render, screen} from '../../_tests/testUtils';
-import {ErrorBoundary} from './ErrorBoundary';
-
-describe('ErrorBoundary', () => {
-    beforeAll(() => jest.spyOn(console, 'error').mockImplementation(jest.fn()));
-    afterAll(() => (console.error as jest.Mock).mockRestore());
-
-    const ComponentWithError = () => {
-        throw new Error('boom!');
-    };
-
-    test('Display proper error message with recovery buttons', async () => {
-        const buttons = [<Button>refresh</Button>, <Button>go_back</Button>];
-
-        render(
-            <ErrorBoundary recoveryButtons={buttons}>
-                <ComponentWithError />
-            </ErrorBoundary>
-        );
-
-        expect(screen.getByText(/error_occurred/)).toBeInTheDocument();
-        expect(screen.getByText(/boom!/)).toBeInTheDocument();
-        expect(screen.getByRole('button', {name: /refresh/i})).toBeInTheDocument();
-        expect(screen.getByRole('button', {name: /go_back/i})).toBeInTheDocument();
-    });
-
-    test('Display error message without recovery buttons', async () => {
-        render(
-            <ErrorBoundary>
-                <ComponentWithError />
-            </ErrorBoundary>
-        );
-
-        expect(screen.getByText(/error_occurred/)).toBeInTheDocument();
-        expect(screen.getByText(/boom!/)).toBeInTheDocument();
-        expect(screen.queryByRole('button', {name: /refresh/i})).not.toBeInTheDocument();
-        expect(screen.queryByRole('button', {name: /go_back/i})).not.toBeInTheDocument();
-    });
-});