@steroidsjs/core 2.3.0-beta.1 → 2.3.0-beta.2

package/src/ui/content/Alert/Alert.tsx

@@ -1,95 +0,0 @@
-import React, {useState, useCallback} from 'react';
-import { useComponents } from '../../../hooks';
-
-export interface IAlertProps {
-    view?: any,
-    className?: CssClassName,
-
-    /**
-    * Дочерние элементы
-    */
-    action?: React.ReactNode,
-
-    /**
-     * Типы Оповещений
-     * @example {'info'}
-     */
-    type: 'success' | 'info' | 'warning' | 'error' | string,
-
-    /** Основное сообщения Оповещения
-     * @example {'Sending is confirmed!'}
-     */
-    message?: string,
-
-    /** Дополнительное содрежание сообщения.
-     * @example {'Please, check your email.'}
-     */
-    description?: string,
-
-    style?: React.CSSProperties,
-
-    /**
-     *  Нужно ли отображать кнопку, чтобы закрыть Оповещение
-     */
-    showClose?: boolean,
-
-    /**
-     * Нужно ли отображать иконку, соответствующую типа Оповещения
-     * @example {true}
-     */
-    showIcon?: boolean,
-
-    /**
-     * Callback функция вызываемая при нажатии на кнопку закрытия
-     * @example {() => console.log('this is callback')}
-     */
-    onClose?: () => void,
-
-    animation?: boolean,
-
-    /**
-     * Время анимации в миллисекундах
-     * @example {1000}
-     */
-    animationDuration?: number,
-
-}
-
-export interface IAlertViewProps extends IAlertProps {
-    isExist: boolean,
-    isVisible: boolean,
-    onClose: () => void,
-    onClick?: (e: MouseEvent) => void,
-}
-
-function Alert(props: IAlertProps): JSX.Element {
-    const components = useComponents();
-
-    const [isExist, setIsExist] = useState<boolean>(true);
-    const [isVisible, setIsVisible] = useState<boolean>(true);
-
-    const onClose = useCallback(() => {
-        setIsVisible(false);
-        setTimeout(() => setIsExist(false), props.animationDuration);
-        if (props.onClose) {
-            props.onClose();
-        }
-    }, [props]);
-
-    return components.ui.renderView(props.view || 'content.AlertView', {
-        ...props,
-        isExist,
-        isVisible,
-        onClose,
-    });
-}
-
-Alert.defaultProps = {
-    type: 'success',
-    showClose: false,
-    showIcon: true,
-    animation: false,
-    animationDuration: 390,
-};
-
-export default Alert;

package/src/ui/content/Alert/demo/description.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react';
-import Alert from '../Alert';
-
-/**
- * Header+text with icon
- * Header+text without icon
- * @order 2
- * @col 12
- */
-
-export default () => (
-    <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gridGap: '20px'}}>
-        <div style={{display: 'grid', gridGap: '20px'}}>
-            <Alert
-                type='success'
-                message='Success Tips'
-                description='Detailed description and advice about successful copywriting.'
-            />
-            <Alert
-                type='info'
-                message='Information Notes'
-                description='Additional description and information about copywriting.'
-            />
-            <Alert
-                type='warning'
-                message='Warning'
-                showClose
-                description='This is a warning notice about copywriting.'
-            />
-            <Alert
-                type='error'
-                message='Error'
-                description='This is an error message about copywriting.'
-            />
-        </div>
-        <div style={{display: 'grid', gridGap: '20px'}}>
-            <Alert
-                showIcon={false}
-                type='success'
-                message='Success Tips'
-                description='Detailed description and advice about successful copywriting.'
-            />
-            <Alert
-                showIcon={false}
-                type='info'
-                message='Information Notes'
-                description='Additional description and information about copywriting.'
-            />
-            <Alert
-                showIcon={false}
-                type='warning'
-                message='Warning'
-                showClose
-                description='This is a warning notice about copywriting.'
-            />
-            <Alert
-                showIcon={false}
-                type='error'
-                message='Error'
-                description='This is an error message about copywriting.'
-            />
-        </div>
-    </div>
-);

package/src/ui/content/Alert/demo/icon.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import Alert from '../Alert';
-
-/**
- * Header with icon and without icon
- * @order 1
- * @col 12
- */
-
-export default () => (
-    <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gridGap: '20px'}}>
-        <div style={{display: 'grid', gridGap: '20px'}}>
-            <Alert type='success' message='Success Tips' />
-            <Alert type='info' message='Information Notes' />
-            <Alert type='warning' message='Warning' showClose />
-            <Alert type='error' message='Error' />
-        </div>
-        <div style={{display: 'grid', gridGap: '20px'}}>
-            <Alert showIcon={false} type='success' message='Success Tips' />
-            <Alert showIcon={false} type='info' message='Information Notes' />
-            <Alert showIcon={false} type='warning' message='Warning' showClose />
-            <Alert showIcon={false} type='error' message='Error' />
-        </div>
-    </div>
-);

package/src/ui/content/Alert/demo/text.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react';
-import Alert from '../Alert';
-
-/**
- * Text with icon and without icon
- * @order 3
- * @col 12
- */
-
-export default () => (
-    <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gridGap: '20px'}}>
-        <div style={{display: 'grid', gridGap: '20px'}}>
-            <Alert
-                type='success'
-                description='Detailed description and advice about successful copywriting.'
-            />
-            <Alert
-                type='info'
-                description='Additional description and information about copywriting.'
-            />
-            <Alert
-                type='warning'
-                showClose
-                description='This is a warning notice about copywriting.'
-            />
-            <Alert
-                type='error'
-                description='This is an error message about copywriting.'
-            />
-        </div>
-        <div style={{display: 'grid', gridGap: '20px'}}>
-            <Alert
-                showIcon={false}
-                type='success'
-                description='Detailed description and advice about successful copywriting.'
-            />
-            <Alert
-                showIcon={false}
-                type='info'
-                description='Additional description and information about copywriting.'
-            />
-            <Alert
-                showIcon={false}
-                type='warning'
-                showClose
-                description='This is a warning notice about copywriting.'
-            />
-            <Alert
-                showIcon={false}
-                type='error'
-                description='This is an error message about copywriting.'
-            />
-        </div>
-    </div>
-);

package/src/ui/content/Alert/index.ts

@@ -1,3 +0,0 @@
-import Alert from './Alert';
-
-export default Alert;

package/src/ui/content/Avatar/Avatar.test.tsx

@@ -1,54 +0,0 @@
-import 'jest-enzyme';
-import mountWithApp from '../../../../tests/mountWithApp';
-import Avatar from './Avatar';
-
-describe('Avatar tests', () => {
-    it('should render something without props', () => {
-        const wrapper = mountWithApp(Avatar);
-        expect(wrapper.find('Avatar')).not.toBeEmptyRender();
-    });
-
-    describe('Static props', () => {
-        const props = {
-            alt: 'default image',
-            src: 'https://www.dreamsart.it/wp-content/uploads/2019/04/image1-9.jpeg',
-            title: 'Avatar',
-            className: 'test',
-            size: 'x-large',
-            shape: 'circle',
-            status: 'true',
-            style: {width: '30px'},
-        };
-
-        const wrapper = mountWithApp(Avatar, {...props});
-
-        it('should static props transmitted unchanged', () => {
-            expect(wrapper.find('Avatar')).toHaveProp(props);
-        });
-        it('should render right image', () => {
-            expect(wrapper.find('img')).toHaveProp('src', props.src);
-        });
-        it('should have right alternative', () => {
-            expect(wrapper.find('img')).toHaveProp('alt', props.alt);
-        });
-        it('should have right title', () => {
-            expect(wrapper.find('img')).toHaveProp('title', props.title);
-        });
-
-        it('should have right external className', () => {
-            expect(wrapper.find('.AvatarView')).toHaveClassName(props.className);
-        });
-        it('should have right avatar size', () => {
-            expect(wrapper.find('.AvatarView')).toHaveClassName(`.AvatarView_size_${props.size}`);
-        });
-        it('should have right avatar shape', () => {
-            expect(wrapper.find('.AvatarView')).toHaveClassName(`AvatarView_shape_${props.shape}`);
-        });
-        it('should have right online status', () => {
-            expect(wrapper.find('.AvatarView')).toHaveClassName(`AvatarView_has-status_${props.status}`);
-        });
-        it('should have right external style', () => {
-            expect(wrapper.find('.AvatarView__body')).toHaveProp('style', props.style);
-        });
-    });
-});

package/src/ui/content/Avatar/Avatar.tsx

@@ -1,111 +0,0 @@
-import {useState, useCallback, useMemo} from 'react';
-import { useComponents } from '../../../hooks';
-
-export interface IAvatarProps {
-
-    /**
-     * Альтернативный текст для изображения
-     * @example {'default image'}
-     */
-    alt?: string,
-
-    /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
-
-    /**
-     * Дочерние элементы
-     */
-    children?: CustomView,
-
-    /**
-     * Размер аватара
-     * @example {'md'}
-     */
-    size?: Size | 'x-large' | number,
-
-    /**
-     * Форма аватара
-     * @example {'circle'}
-     */
-    shape?: 'circle' | 'square' | string,
-
-    /**
-     * Ссылка на изображение для аватара
-     * @example {'https://user/avatar.png'}
-     */
-    src?: string,
-
-    // TODO Список адаптивных разрешений изображения
-    srcSet?: string;
-
-    /**
-     * Статус онлайна
-     * @example {true}
-     */
-    status?: boolean,
-
-    /**
-     * Объект CSS стилей
-     * @example {width: '30px'}
-     */
-    style?: CustomStyle,
-
-    /**
-     * Заголовок аватарки
-     * @example {'Avatar'}
-     */
-    title?: string,
-
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
-}
-
-export interface IAvatarViewProps extends IAvatarProps {
-    isError: boolean,
-    onError: () => void,
-    formattedTitle: () => void,
-}
-
-function Avatar(props: IAvatarProps) {
-    const components = useComponents();
-
-    const [isError, setIsError] = useState<boolean>(false);
-
-    const onError = useCallback(() => {
-        if (!isError) {
-            setIsError(true);
-        }
-    }, [isError]);
-
-    const formattedTitle = useMemo(() => {
-        let resultTitle = '';
-        if (props.title) {
-            const title = props.title.split(' ');
-            resultTitle = title[0][0].toUpperCase();
-            if (title.length > 1) {
-                resultTitle += title[1][0].toUpperCase();
-            }
-        }
-        return resultTitle;
-    }, [props.title]);
-
-    return components.ui.renderView(props.view || 'content.AvatarView', {
-        ...props,
-        isError,
-        onError,
-        formattedTitle,
-    });
-}
-
-Avatar.defaultProps = {
-    size: 'middle',
-    shape: 'circle',
-    status: false,
-};
-
-export default Avatar;

package/src/ui/content/Avatar/AvatarGroup.tsx

@@ -1,35 +0,0 @@
-import React, {useMemo} from 'react';
-import { useComponents } from '../../../hooks';
-
-export interface AvatarGroupProps{
-    view?: any,
-    children?: CustomView[],
-    style?: React.CSSProperties,
-    maxCount?: number,
-}
-
-export type IAvatarGroupViewProps = AvatarGroupProps
-
-function AvatarGroup(props: AvatarGroupProps) {
-    const childrenToRender = useMemo(() => {
-        if (props.maxCount < props.children.length) {
-            return props.children.slice(0, props.maxCount);
-        }
-        return props.children;
-    }, [props.children, props.maxCount]);
-
-    const components = useComponents();
-    const AvatarGroupView = components.ui.getView(props.view || 'content.AvatarGroupView');
-
-    return (
-        <AvatarGroupView>
-            {childrenToRender}
-        </AvatarGroupView>
-    );
-}
-
-AvatarGroup.defaultProps = {
-
-};
-
-export default AvatarGroup;

package/src/ui/content/Avatar/demo/custome size.tsx

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import {Avatar} from '../../../content';
-
-/**
- * Custom size in numbers
- * @order 4
- * @col 3
- */
-
-export default () => (
-    <div style={{display: 'grid', gridGap: '20px'}}>
-        <div style={{display: 'flex', gridGap: '10px'}}>
-            <Avatar size={20} src='https://i.ibb.co/1fWbXCt/F-1.png' status />
-            <Avatar size={20} shape='square' title='Kozhin Dev' />
-        </div>
-        <div style={{display: 'flex', gridGap: '10px'}}>
-            <Avatar size={100} src='https://i.ibb.co/1fWbXCt/F-1.png' status />
-            <Avatar size={100} shape='square' title='Kozhin Dev' />
-        </div>
-    </div>
-);

package/src/ui/content/Avatar/demo/group.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import {Avatar, AvatarGroup} from '../../../content';
-
-/**
- * Group of avatars
- * @order 5
- * @col 12
- */
-
-export default () => (
-    <div style={{display: 'flex', gridGap: '20px'}}>
-        <AvatarGroup>
-            <Avatar size='small' src='https://i.ibb.co/1fWbXCt/F-1.png' />
-            <Avatar size='small' title='Kozhin Dev' />
-            <Avatar size='small' src='https://i.ibb.co/1fWbXCt/F-1.png' status />
-            <Avatar size='small' title='Kozhin Dev' status />
-        </AvatarGroup>
-        <AvatarGroup maxCount={2}>
-            <Avatar size='middle' src='https://i.ibb.co/1fWbXCt/F-1.png' />
-            <Avatar size='middle' title='Kozhin Dev' />
-            <Avatar size='middle' src='https://i.ibb.co/1fWbXCt/F-1.png' status />
-            <Avatar size='middle' title='Kozhin Dev' status />
-        </AvatarGroup>
-        <AvatarGroup>
-            <Avatar size='large' src='https://i.ibb.co/1fWbXCt/F-1.png' />
-            <Avatar size='large' title='Kozhin Dev' />
-            <Avatar size='large' src='https://i.ibb.co/1fWbXCt/F-1.png' status />
-            <Avatar size='large' title='Kozhin Dev' status />
-        </AvatarGroup>
-        <AvatarGroup maxCount={3}>
-            <Avatar size='x-large' src='https://i.ibb.co/1fWbXCt/F-1.png' />
-            <Avatar size='x-large' title='Kozhin Dev' />
-            <Avatar size='x-large' src='https://i.ibb.co/1fWbXCt/F-1.png' status />
-            <Avatar size='x-large' title='Kozhin Dev' status />
-        </AvatarGroup>
-    </div>
-);

package/src/ui/content/Avatar/demo/shape.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import {Avatar} from '../../../content';
-
-/**
- * Basic sizes with image source, online status and square shape
- * @order 3
- * @col 3
- */
-
-export default () => (
-    <div style={{display: 'grid', gridGap: '20px'}}>
-        <div style={{display: 'flex', gridGap: '10px'}}>
-            <Avatar size='small' shape='square' src='https://i.ibb.co/1fWbXCt/F-1.png' />
-            <Avatar size='small' shape='square' title='Kozhin Dev' />
-        </div>
-        <div style={{display: 'flex', gridGap: '10px'}}>
-            <Avatar size='middle' shape='square' src='https://i.ibb.co/1fWbXCt/F-1.png' />
-            <Avatar size='middle' shape='square' title='Kozhin Dev' />
-        </div>
-        <div style={{display: 'flex', gridGap: '10px'}}>
-            <Avatar size='large' shape='square' src='https://i.ibb.co/1fWbXCt/F-1.png' />
-            <Avatar size='large' shape='square' title='Kozhin Dev' />
-        </div>
-        <div style={{display: 'flex', gridGap: '10px'}}>
-            <Avatar size='x-large' shape='square' src='https://i.ibb.co/1fWbXCt/F-1.png' />
-            <Avatar size='x-large' shape='square' title='Kozhin Dev' />
-        </div>
-    </div>
-);

package/src/ui/content/Avatar/demo/size.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import {Avatar} from '../../../content';
-
-/**
- * Basic sizes with image source and online status
- * @order 1
- * @col 3
- */
-
-export default () => (
-    <div style={{display: 'grid', gridGap: '20px'}}>
-        <div style={{display: 'flex', gridGap: '10px'}}>
-            <Avatar size='small' src='https://i.ibb.co/1fWbXCt/F-1.png' />
-            <Avatar size='small' src='https://i.ibb.co/1fWbXCt/F-1.png' status />
-        </div>
-        <div style={{display: 'flex', gridGap: '10px'}}>
-            <Avatar size='middle' src='https://i.ibb.co/1fWbXCt/F-1.png' />
-            <Avatar size='middle' src='https://i.ibb.co/1fWbXCt/F-1.png' status />
-        </div>
-        <div style={{display: 'flex', gridGap: '10px'}}>
-            <Avatar size='large' src='https://i.ibb.co/1fWbXCt/F-1.png' />
-            <Avatar size='large' src='https://i.ibb.co/1fWbXCt/F-1.png' status />
-        </div>
-        <div style={{display: 'flex', gridGap: '10px'}}>
-            <Avatar size='x-large' src='https://i.ibb.co/1fWbXCt/F-1.png' />
-            <Avatar size='x-large' src='https://i.ibb.co/1fWbXCt/F-1.png' status />
-        </div>
-    </div>
-);

package/src/ui/content/Avatar/demo/title.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import {Avatar} from '../../../content';
-
-/**
- * Basic sizes with title and online status
- * @order 2
- * @col 3
- */
-
-export default () => (
-    <div style={{display: 'grid', gridGap: '20px'}}>
-        <div style={{display: 'flex', gridGap: '10px'}}>
-            <Avatar size='small' title='Kozhin Dev' />
-            <Avatar size='small' title='Kozhin Dev' status />
-        </div>
-        <div style={{display: 'flex', gridGap: '10px'}}>
-            <Avatar size='middle' title='Kozhin Dev' />
-            <Avatar size='middle' title='Kozhin Dev' status />
-        </div>
-        <div style={{display: 'flex', gridGap: '10px'}}>
-            <Avatar size='large' title='Kozhin Dev' />
-            <Avatar size='large' title='Kozhin Dev' status />
-        </div>
-        <div style={{display: 'flex', gridGap: '10px'}}>
-            <Avatar size='x-large' title='Kozhin Dev' />
-            <Avatar size='x-large' title='Kozhin Dev' status />
-        </div>
-    </div>
-);

package/src/ui/content/Avatar/index.ts

@@ -1,12 +0,0 @@
-import Avatar from './Avatar';
-import AvatarGroup from './AvatarGroup';
-
-export {
-    Avatar,
-    AvatarGroup,
-};
-
-export default {
-    Avatar,
-    AvatarGroup,
-};