@steroidsjs/core 2.2.86 → 2.3.0-beta.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/ui/layout/Portal.tsx

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

@@ -0,0 +1,47 @@
+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();
+        });
+    });
+});