@steroidsjs/core 2.2.2 → 2.2.6

package/src/ui/format/DateFormatter/DateFormatter.tsx

@@ -1,34 +0,0 @@
-import {useComponents} from '../../../hooks';
-
-export interface IDateFormatterProps {
-
-    /**
-     * Формат даты
-     * @example LL
-     */
-    format?: string;
-    view?: CustomView;
-
-    /**
-     * Дата
-     * @example 2023-09-11
-     */
-    value?: any;
-
-    [key: string]: any;
-}
-
-const defaultProps = {
-    format: 'LL',
-};
-
-export default function DateFormatter(props: IDateFormatterProps): JSX.Element {
-    const components = useComponents();
-
-    if (!props.value) {
-        return null;
-    }
-    return components.ui.renderView(props.view || 'format.DefaultFormatterView', {
-        value: components.locale.moment(props.value).format(props.format || defaultProps.format),
-    });
-}

package/src/ui/format/DateFormatter/demo/basic.tsx

@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-import DateFormatter from '../DateFormatter';
-
-export default () => (
-    <>
-        <DateFormatter
-            value='2018-05-04'
-        />
-    </>
-);

package/src/ui/format/DateTimeFormatter/DateTimeFormatter.tsx

@@ -1,48 +0,0 @@
-import moment from 'moment';
-import {useComponents} from '../../../hooks';
-import {IDateFormatterProps} from '../DateFormatter/DateFormatter';
-
-export interface IDateTimeFormatterProps {
-    /**
-     * Формат даты
-     * @example LLL
-     */
-    format?: string;
-
-    /**
-     * Показывать ли дату учитываю временную зону
-     * @example true
-     */
-    timeZone?: string | boolean;
-    view?: CustomView;
-
-    /**
-     * Дата
-     * @example 2023-09-11
-     */
-    value?: any;
-
-    [key: string]: any;
-}
-
-function DateTimeFormatter(props: IDateFormatterProps): JSX.Element {
-    const components = useComponents();
-
-    if (!props.value) {
-        return null;
-    }
-
-    const date = props.timeZone === false
-        ? moment(props.value).locale(components.locale.language)
-        : components.locale.moment(props.value);
-
-    return components.ui.renderView(props.view || 'format.DefaultFormatterView', {
-        value: date.format(props.format),
-    });
-}
-
-DateTimeFormatter.defaultProps = {
-    format: 'LLL',
-};
-
-export default DateTimeFormatter;

package/src/ui/format/DateTimeFormatter/demo/basic.tsx

@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-import DateTimeFormatter from '../DateTimeFormatter';
-
-export default () => (
-    <>
-        <DateTimeFormatter
-            value='2018-05-04 16:15:00'
-        />
-    </>
-);

package/src/ui/format/EnumFormatter/EnumFormatter.tsx

@@ -1,51 +0,0 @@
-import _isArray from 'lodash-es/isArray';
-import _isFunction from 'lodash-es/isFunction';
-import _isObject from 'lodash-es/isObject';
-import {useComponents, useDataProvider} from '../../../hooks';
-import {DataProviderItems} from '../../../hooks/useDataProvider';
-
-export interface IEnumFormatterProps {
-
-    /**
-     * Перечисление элементов.
-     * 1) Может быть строкой вида: `app.geo.enums.Cities`
-     * 2) Массивом: [{id: 1, label: "London"}]
-     */
-    items?: DataProviderItems;
-
-    /**
-     * Уникальный идентификатор элемента из `items`
-     * @example unique label
-     */
-    value?: number | string,
-    view?: CustomView;
-
-    [key: string]: any;
-}
-
-/**
- * @param {array|function} items
- * @param {string|number} id
- * @returns {*}
- */
-export const getLabel = (items, id) => {
-    // Array
-    if (_isArray(items)) {
-        const foundItem = items.find(item => item.id === id);
-        return foundItem ? foundItem.label : null;
-    }
-    // Enum
-    if (_isObject(items) && _isFunction(items.getLabel)) {
-        return items.getLabel(id);
-    }
-    return null;
-};
-
-export default function EnumFormatter(props: IEnumFormatterProps): JSX.Element {
-    const components = useComponents();
-    const {items} = useDataProvider({items: props.items});
-
-    return components.ui.renderView(props.view || 'format.DefaultFormatterView', {
-        value: getLabel(items, props.value),
-    });
-}

package/src/ui/format/FileSize/FileSize.tsx

@@ -1,52 +0,0 @@
-import {useComponents} from '../../../hooks';
-
-export interface IFileSizeFormatterProps {
-
-    /**
-     * Если не указан размер файла, то в случае, если showZero = true
-     * то будет показан `0`, иначе пустая строка
-     * @example true
-     */
-    showZero?: boolean;
-    view?: CustomView;
-
-    /**
-     * Размер файла
-     * @example 6920
-     */
-    value?: any;
-
-    [key: string]: any;
-}
-
-export const asHumanFileSize = (bytes, showZero) => {
-    if (!bytes) {
-        return showZero ? '0' : '';
-    }
-    const thresh = 1000;
-    if (Math.abs(bytes) < thresh) {
-        return bytes + ' ' + __('B');
-    }
-    const units = [
-        __('kB'),
-        __('MB'),
-        __('GB'),
-        __('TB'),
-        __('PB'),
-        __('EB'),
-        __('ZB'),
-        __('YB'),
-    ];
-    let u = -1;
-    do {
-        bytes /= thresh;
-        u += 1;
-    } while (Math.abs(bytes) >= thresh && u < units.length - 1);
-    return bytes.toFixed(1) + ' ' + units[u];
-};
-
-export default function FileSize(props: IFileSizeFormatterProps): JSX.Element {
-    return useComponents().ui.renderView(props.view || 'format.DefaultFormatterView', {
-        value: asHumanFileSize(props.value, this.props.showZero),
-    });
-}

package/src/ui/format/Format/Format.tsx

@@ -1,45 +0,0 @@
-import _get from 'lodash-es/get';
-import _isObject from 'lodash-es/isObject';
-import _isString from 'lodash-es/isString';
-import {useContext} from 'react';
-import useModel from '../../../hooks/useModel';
-import {useComponents} from '../../../hooks';
-import {FormContext} from '../../form/Form/Form';
-
-export interface IFormatProps {
-    attribute?: string;
-    model?: string | ((...args: any[]) => any) | any;
-    item?: any;
-    component?: string | ((...args: any[]) => any);
-    getFormatter?: any;
-    ui?: any;
-    emptyText?: any;
-
-    [key: string]: any;
-}
-
-export function getFormatterPropsFromModel(model, attribute) {
-    if (!model || !attribute) {
-        return null;
-    }
-
-    const attributeMeta = model?.attributes.find(item => item.attribute === attribute);
-    return attributeMeta?.formatter || null;
-}
-
-export default function Format(props: IFormatProps): JSX.Element {
-    const context = useContext(FormContext);
-    const components = useComponents();
-
-    // Get field config from model
-    const model = useModel(props.model || context?.model);
-    let component = props.component || getFormatterPropsFromModel(model, props.attribute);
-    if (_isString(component)) {
-        component = components.ui.getFormatter('format.' + component);
-    }
-
-    return components.ui.renderView(component || 'format.DefaultFormatterView', {
-        ...props,
-        value: _get(props.item, props.attribute) || props.emptyText || null,
-    });
-}

package/src/ui/format/MoneyFormatter/MoneyFormatter.tsx

@@ -1,60 +0,0 @@
-import _round from 'lodash-es/round';
-import {useComponents} from '../../../hooks';
-
-export interface IMoneyFormatterProps {
-
-    /**
-     * Валюта @enum {eur, rub, usd}
-     * @example rub
-     */
-    currency?: string;
-
-    /**
-     * Округление числа
-     * @example 2
-     */
-    scale?: number;
-
-    /**
-     * Разрядность (при передаче int в значении)
-     * @example 2
-     */
-    precision?: number;
-
-    view?: CustomView;
-    value?: any;
-    [key: string]: any;
-}
-
-export const moneyFormat = (amount, currency, scale) => {
-    const symbols = {
-        eur: __('€'),
-        rub: __('₽'),
-        usd: __('$'),
-    };
-    return __('{amount, number} {symbol}', {
-        amount: _round(amount, scale),
-        symbol: symbols[currency] || currency.toUpperCase(),
-    });
-};
-
-function MoneyFormatter(props: IMoneyFormatterProps): JSX.Element {
-    const value = props.precision > 0
-        ? props.value / 10 ** props.precision
-        : props.value;
-
-    return useComponents().ui.renderView(props.view || 'format.DefaultFormatterView', {
-        value: moneyFormat(
-            value,
-            props.currency,
-            props.scale,
-        ),
-    });
-}
-
-MoneyFormatter.defaultProps = {
-    scale: 2,
-    precision: 0,
-};
-
-export default MoneyFormatter;

package/src/ui/format/index.ts

@@ -1,27 +0,0 @@
-import BooleanFormatter from './BooleanFormatter';
-import DateFormatter from './DateFormatter';
-import DateTimeFormatter from './DateTimeFormatter';
-import EnumFormatter from './EnumFormatter';
-import FileSize from './FileSize';
-import MoneyFormatter from './MoneyFormatter';
-// import PhotosFormatter from './PhotosFormatter';
-
-export {
-    BooleanFormatter,
-    DateFormatter,
-    DateTimeFormatter,
-    EnumFormatter,
-    FileSize,
-    MoneyFormatter,
-    // PhotosFormatter,
-};
-
-export default {
-    BooleanFormatter,
-    DateFormatter,
-    DateTimeFormatter,
-    EnumFormatter,
-    FileSize,
-    MoneyFormatter,
-    // PhotosFormatter,
-};

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/Meta/Meta.tsx

@@ -1,111 +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}
-                    dangerouslySetInnerHTML={{
-                        __html: attrs.innerHtml,
-                    }}
-                />
-            ))}
-            {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;