@steroidsjs/core 2.3.0-beta.5 → 2.3.0-beta.6

package/src/ui/icon/Icon/Icon.tsx

@@ -1,97 +0,0 @@
-import * as React from 'react';
-
-import _isObject from 'lodash-es/isObject';
-import _isString from 'lodash-es/isString';
-import {useComponents} from '../../../hooks';
-
-/**
- * Install the latest free version of Font Awesome via yarn:
- * ```
- * $ yarn add @fortawesome/fontawesome-free
- * ```
- *
- * in your root style file (e.g. index.scss) import fontawesome styles
- * ```
- *  @import "~@fortawesome/fontawesome-free/scss/fontawesome";
- * ```
- *
- * and in hoc @application add the following code
- * ```
- *   ui.addIcons(getFontAwesomeIcons())
- * ```
- *
- * That get the icon used <Icon name={'icon-name'} />
- */
-
-export interface IIconProps {
-    /**
-     * Имя иконки (латиницей). Импорт иконок происходит на старте приложения.
-     * @example create
-     */
-    name?: string,
-
-    /**
-     * Заголовок, отображаемый при наведении (через нативное поле title)
-     * @example Добавить запись
-     */
-    title?: string,
-
-    className?: CssClassName;
-
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: React.ComponentType;
-
-    onClick?: any,
-
-    [key: string]: any,
-}
-
-export interface IIconViewProps extends IIconProps {
-    /**
-     * @example require('icon.png'), <svg .../>, 'https://<site-name>/icon.png
-     */
-    icon: string,
-}
-
-export default function Icon(props: IIconProps): JSX.Element {
-    const components = useComponents();
-
-    const name = props.name;
-    if (!_isString(name)) {
-        return null;
-    }
-
-    let icon;
-
-    if (process.env.PLATFORM === 'mobile') {
-        icon = components.ui.getIcon(name) || name;
-    } else {
-        icon = name.indexOf('<svg') === 0 || name.indexOf('http') === 0
-            ? name
-            : components.ui.getIcon(name);
-
-        if (_isObject(icon) && _isString(icon.default)) {
-            icon = icon.default;
-        }
-
-        // Fix width attribute in icon
-        if (_isString(icon) && icon.indexOf('<svg') === 0) {
-            const match = icon.match(/<svg([^>]+)/);
-            if (match && match[0].indexOf('width') === -1) {
-                icon = icon.replace(match[0], match[0] + ' width=16');
-            }
-        }
-
-        if (!icon) {
-            throw new Error('Not found icon with name "' + name + '"');
-        }
-    }
-
-    return components.ui.renderView(props.view || 'icon.IconView', {
-        ...props,
-        icon,
-    });
-}

package/src/ui/icon/Icon/demo/icon.tsx

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import Icon from '../Icon';
-
-export default () => (
-    <>
-        <Icon name='star' />
-    </>
-);

package/src/ui/icon/Icon/index.ts

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

package/src/ui/layout/Header/Header.tsx

@@ -1,32 +0,0 @@
-import {useComponents} from '../../../hooks';
-import {INavProps} from '../../nav/Nav/Nav';
-
-export interface IHeaderProps {
-    className?: CssClassName;
-    view?: any;
-    logo?: {
-        title: string,
-        linkProps?: Record<string, unknown>,
-        icon?: string | any,
-        className?: CssClassName,
-    };
-    nav?: INavProps;
-
-    /**
-     * Размер
-     */
-    size?: Size,
-
-    /**
-     * Темная тема
-     */
-    dark?: boolean,
-
-    [key: string]: any;
-}
-
-export type IHeaderViewProps = IHeaderProps
-
-export default function Header(props:IHeaderProps): JSX.Element {
-    return useComponents().ui.renderView(props.view || 'layout.HeaderView', props);
-}

package/src/ui/layout/Header/index.ts

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

package/src/ui/layout/Loader/Loader.tsx

@@ -1,10 +0,0 @@
-import {useComponents} from '../../../hooks';
-
-export interface ILoaderProps {
-    view?: any;
-    [key: string]: any;
-}
-
-export default function Loader(props: ILoaderProps): JSX.Element {
-    return useComponents().ui.renderView(props.view || 'layout.LoaderView', props);
-}

package/src/ui/layout/Loader/index.ts

@@ -1,2 +0,0 @@
-import Loader from './Loader';
-export default Loader;

package/src/ui/layout/Meta/Meta.tsx

@@ -1,110 +0,0 @@
-import React, {
-    BaseHTMLAttributes,
-    LinkHTMLAttributes,
-    MetaHTMLAttributes,
-    PropsWithChildren,
-    ScriptHTMLAttributes,
-    StyleHTMLAttributes,
-} from 'react';
-import Helmet from 'react-helmet';
-
-interface IInnerHTML {
-    /**
-     * Содержимое тега
-     */
-    innerHtml?: string
-}
-
-interface IScript extends ScriptHTMLAttributes<any>, IInnerHTML {}
-interface IStyle extends StyleHTMLAttributes<any>, IInnerHTML {}
-
-/**
- * Meta
- * Компонент используется для ssr и нужен для конфигурации html-тегов в документе.
- */
-interface IMetaProps extends PropsWithChildren<any>{
-    /**
-     * Заголовок документа
-     * @example Home page
-     */
-    title?: string,
-
-    /**
-     * Описание документа
-     * @example The main page of the site
-     */
-    description?: string,
-
-    /**
-     * Скрипты, которые необходимо разместить на сайте
-     * @example [{src: '/lib/SomeLibrary.min.js'}]
-     */
-    scripts?: IScript[],
-
-    /**
-     * Мета-теги
-     * @example [{name: 'yandex-verification', content: 'ce...9e6'}]
-     */
-    meta?: MetaHTMLAttributes<any>[],
-
-    /**
-     * Ссылки на ресурсы
-     * @example [{href: '/lib/SomeLibrary.css', rel: 'stylesheet', type: 'text/css'}]
-     */
-    links?: LinkHTMLAttributes<any>[],
-
-    /**
-     * Контент для тегов \<style\>
-     */
-    styles?: IStyle[],
-
-    /**
-     * Контент для тегов \<noscript\>
-     */
-    noScripts?: IInnerHTML[],
-
-    /**
-     * Конфигурация тега \<base\>
-     */
-    base?: BaseHTMLAttributes<any>
-}
-
-function Meta(props: IMetaProps) {
-    return (
-        <Helmet>
-            <title>{props.title}</title>
-            {props.base && <base {...props.base} />}
-            {props.description && <meta name='description' content={props.description} />}
-            {props.meta?.map((attrs, index) => <meta key={index} {...attrs} />)}
-            {props.links?.map((attrs, index) => <link key={index} {...attrs} />)}
-            {props.styles?.map((attrs, index) => (
-                <style
-                    key={index}
-                    {...attrs}
-                    dangerouslySetInnerHTML={{
-                        __html: attrs.innerHtml,
-                    }}
-                />
-            ))}
-            {props.scripts?.map((attrs, index) => (
-                <script
-                    key={index}
-                    {...attrs}
-                >
-                    {attrs.innerHtml || ''}
-                </script>
-            ))}
-            {props.noScripts?.map((attrs, index) => (
-                <noscript
-                    key={index}
-                    dangerouslySetInnerHTML={{
-                        __html: attrs.innerHtml,
-                    }}
-                />
-            ))}
-            {props.children}
-        </Helmet>
-    );
-}
-
-export default Meta;

package/src/ui/layout/Meta/index.ts

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

package/src/ui/layout/Notifications/Notifications.tsx

@@ -1,143 +0,0 @@
-import * as React from 'react';
-import _orderBy from 'lodash-es/orderBy';
-import {useCallback, useMemo, useState} from 'react';
-import {useMount, usePrevious, useUpdateEffect} from 'react-use';
-import useDispatch from '../../../hooks/useDispatch';
-import {useComponents, useSelector} from '../../../hooks';
-import {setFlashes, closeNotification} from '../../../actions/notifications';
-import {getNotifications, getPosition} from '../../../reducers/notifications';
-
-/**
- * Перед тем как использовать компонент Notification поместите его в DOM дереве следующим образом:
- * ```
- * <div className={bem.block()})}>
- * ```
- *      <Notifications/>
- *      ```
- *      <ModalPortal/>
- *      ```
- *      <TooltipPortal/>
- *      ```
- * </div>
- * ```
- */
-
-interface INotificationItem {
-    id?: number,
-
-    /**
-     * Цвет всплывающего уведомления
-     * @example warning
-     */
-    level?: ColorName,
-
-    /**
-     * Сообщение во всплывающем уведомлении
-     * @example Сохранено!
-     */
-    message?: string,
-    isClosing?: boolean
-}
-
-export interface INotificationsProps {
-    initialFlashes?: {
-        [key: string]: string | any,
-    };
-    notifications?: INotificationItem[];
-    closeTimeoutMs?: number;
-    className?: CssClassName;
-    view?: any;
-    itemView?: any;
-    position?: string;
-    [key: string]: any;
-}
-
-export interface INotificationsViewProps {
-    notifications?: INotificationItem[];
-    className?: CssClassName;
-    position: string;
-    children?: React.ReactNode,
-}
-
-export interface INotificationsItemViewProps extends INotificationItem {
-    isClosing: boolean;
-    onClose: () => void;
-    position: string;
-}
-
-function Notifications(props:INotificationsProps): JSX.Element {
-    const {notifications, position} = useSelector(state => ({
-        notifications: getNotifications(state),
-        position: getPosition(state),
-    }));
-
-    const components = useComponents();
-    const [innerNotifications, setInnerNotifications] = useState(props.notifications || []);
-    const [closing, setClosing] = useState([]);
-
-    const dispatch = useDispatch();
-    useMount(() => {
-        if (props.initialFlashes) {
-            dispatch(setFlashes(props.initialFlashes));
-
-            // Disable scroll or scroll to top on show notifications
-            if (!process.env.IS_SSR) {
-                if ('scrollRestoration' in window.history) {
-                    window.history.scrollRestoration = 'manual';
-                } else {
-                    setTimeout(() => window.scrollTo(0, 0), 1000);
-                }
-            }
-        }
-    });
-
-    const prevNotifications = usePrevious(notifications);
-    useUpdateEffect(() => {
-        if (prevNotifications !== notifications) {
-            const propsIds: number[] = notifications.map(item => item.id);
-            const toClose: INotificationItem[] = innerNotifications.filter(item => !propsIds.includes(item.id));
-
-            setInnerNotifications([].concat(notifications));
-            setClosing(closing.concat(innerNotifications.filter(item => !propsIds.includes(item.id))));
-
-            if (toClose.length > 0) {
-                setTimeout(() => setClosing(closing.filter(item => !toClose.includes(item))), props.closeTimeoutMs);
-            }
-        }
-    }, [closing, innerNotifications, notifications, prevNotifications, props.closeTimeoutMs]);
-
-    const onClose = useCallback(
-        notificationId => dispatch(closeNotification(notificationId)),
-        [dispatch],
-    );
-
-    const closingIds = closing.map(item => item.id);
-
-    const items = useMemo(() => (
-        _orderBy([].concat(innerNotifications).concat(closing), ['id'], 'asc')
-            .map(item => ({
-                ...item,
-                isClosing: closingIds.includes(item.id),
-                onClose: () => onClose(item.id),
-            }))
-    ),
-    [innerNotifications, closing, closingIds, onClose]);
-
-    const NotificationsItemView = props.itemView || components.ui.getView('layout.NotificationsItemView');
-    return components.ui.renderView(props.view || 'layout.NotificationsView', {
-        ...props,
-        position: position || '',
-        children: items.map(item => (
-            <NotificationsItemView
-                key={item.id}
-                {...item}
-            />
-        )),
-    });
-}
-
-Notifications.defaultProps = {
-    closeTimeoutMs: 1500,
-};
-
-export default Notifications;

package/src/ui/layout/Notifications/demo/basic.tsx

@@ -1,48 +0,0 @@
-import * as React from 'react';
-import useDispatch from '../../../../hooks/useDispatch';
-import Button from '../../../form/Button';
-import {showNotification} from '../../../../actions/notifications';
-
-/**
- * Все типы уведомлений
- * @order 1
- * @col 6
- */
-
-export default () => {
-    const dispatch = useDispatch();
-    const notifications = {
-        primary: 'Primary notification',
-        secondary: 'Secondary notification',
-        success: 'Success notification',
-        danger: 'Danger notification',
-        warning: 'Warning notification',
-        info: 'Info notification',
-        light: 'Light notification',
-        dark: 'Dark notification',
-    };
-
-    return (
-        <div
-            style={{
-                display: 'flex',
-                flexFlow: 'column',
-            }}
-        >
-            {Object.keys(notifications).map((level: string) => (
-                [].concat(notifications[level] || [])
-                    .map(message => (
-                        <Button
-                            key={level}
-                            color={level}
-                            label={__(`Уведомление типа "${level}"`)}
-                            onClick={() => {
-                                dispatch(showNotification(message, level));
-                            }}
-                            style={{ margin: '10px 0' }}
-                        />
-                    ))
-            ))}
-        </div>
-    );
-};

package/src/ui/layout/Notifications/demo/position.tsx

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import {Button} from '../../../form';
-import useDispatch from '../../../../hooks/useDispatch';
-import {showNotification} from '../../../../actions/notifications';
-
-/**
- * Все позиции уведомлений
- * @order 3
- * @col 12
- */
-
-const positions = {
-    tr: 'top-right',
-    tl: 'top-left',
-    br: 'bottom-right',
-    bl: 'bottom-left',
-};
-
-export default () => {
-    const dispatch = useDispatch();
-    return (
-        <div style={{display: 'grid', gridAutoFlow: 'column', gridGap: '10px', justifyContent: 'center'}}>
-            {Object.values(positions).map((position: string) => (
-                <Button
-                    key={position}
-                    color='dark'
-                    label={`Позиция ${position}`}
-                    onClick={() => {
-                        dispatch(showNotification(position, 'success', {position, timeOut: 1000}));
-                    }}
-                />
-            ))}
-        </div>
-    );
-};

package/src/ui/layout/Notifications/demo/timeOut.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react';
-import {Button} from '../../../form';
-import useDispatch from '../../../../hooks/useDispatch';
-import {showNotification} from '../../../../actions/notifications';
-
-/**
- * Время самостоятельного пропадания уведомления в милесекундах
- * @order 2
- * @col 6
- */
-
-const times = {
-    1: 1000,
-    3: 3000,
-    5: 5000,
-    10: 10000,
-};
-
-export default () => {
-    const dispatch = useDispatch();
-    return (
-        <div style={{display: 'flex', flexFlow: 'column'}}>
-            {Object.values(times).map((time: number) => (
-                <Button
-                    key={time}
-                    color='primary'
-                    label={`Через ${time / 1000} секунд пропадет уведомление`}
-                    onClick={() => {
-                        dispatch(
-                            showNotification(
-                                `${time / 1000} секунд`, 'info',
-                                {position: 'bottom-right', timeOut: time},
-                            ),
-                        );
-                    }}
-                    style={{ margin: '10px 0' }}
-                />
-            ))}
-        </div>
-    );
-};

package/src/ui/layout/Notifications/index.ts

@@ -1,2 +0,0 @@
-import Notifications from './Notifications';
-export default Notifications;

package/src/ui/layout/Portal.tsx

@@ -1,32 +0,0 @@
-import {createPortal} from 'react-dom';
-import {useRef} from 'react';
-import {useMount, useUnmount} from 'react-use';
-import {useComponents} from '../../hooks';
-
-export default function Portal(props) {
-    const components = useComponents();
-    const elementRef = useRef(null);
-
-    if (!elementRef.current) {
-        elementRef.current = document.createElement('div');
-        elementRef.current.className = 'Portal';
-    }
-
-    useMount(() => {
-        document.body.appendChild(elementRef.current);
-        components.ui.setPortalElement(elementRef.current);
-    });
-
-    useUnmount(() => {
-        if (elementRef.current) {
-            components.ui.setPortalElement(null);
-            document.body.removeChild(elementRef.current);
-        }
-    });
-
-    if (process.env.IS_SSR) {
-        return null;
-    }
-
-    return createPortal(props.children, elementRef.current);
-}

package/src/ui/layout/ProgressBar/ProgressBar.test.tsx

@@ -1,47 +0,0 @@
-import 'jest-enzyme';
-import mountWithApp from '../../../../tests/mountWithApp';
-import ProgressBar from './ProgressBar';
-
-describe('ProgressBar tests', () => {
-    it('should render something without props and views', () => {
-        const wrapper = mountWithApp(ProgressBar);
-        expect(wrapper.find('ProgressBar')).not.toBeEmptyRender();
-    });
-
-    describe('CircleProgressBar tests', () => {
-        const props = {
-            percent: 30,
-            status: 'success',
-            type: 'circle',
-            showLabel: false,
-        };
-
-        const wrapper = mountWithApp(ProgressBar, {...props});
-
-        it('should static props transmitted unchanged', () => {
-            expect(wrapper.find('ProgressBar')).toHaveProp(props);
-        });
-        it('should be circle', () => {
-            expect(wrapper.find('.CircleProgressBarView')).toExist();
-        });
-    });
-
-    describe('LineProgressBar tests', () => {
-        const props = {
-            percent: 30,
-            status: 'success',
-            type: 'line',
-            showLabel: true,
-            label: percent => `${percent}%`,
-        };
-
-        const wrapper = mountWithApp(ProgressBar, {...props});
-
-        it('should static props transmitted unchanged', () => {
-            expect(wrapper.find('ProgressBar')).toHaveProp(props);
-        });
-        it('should be line', () => {
-            expect(wrapper.find('.LineProgressBarView')).toExist();
-        });
-    });
-});