bmdl-sdk 1.5.8 → 2.0.0

package/src/styles/globals.css

@@ -0,0 +1,202 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@theme {
+	--color-primary: #7367f0;
+	--color-primary-100: #e3e1fc;
+	--color-primary-200: #c7c2f9;
+	--color-primary-300: #aba4f6;
+	--color-primary-400: #8f85f3;
+	--color-primary-500: #7367f0;
+	--color-primary-600: #685dd8;
+	--color-primary-700: #6258cc;
+	--color-primary-800: #5c52c0;
+	--color-primary-900: #564db4;
+	/*  */
+	--color-secondary: #a8aaae;
+	--color-secondary-100: #eeeeef;
+	--color-secondary-200: #dcdddf;
+	--color-secondary-300: #cbccce;
+	--color-secondary-400: #b9bbbe;
+	--color-secondary-500: #a8aaae;
+	--color-secondary-600: #98999d;
+	--color-secondary-700: #8f9194;
+	--color-secondary-800: #86888b;
+	--color-secondary-900: #7e7f82;
+	/*  */
+	--color-gray: #a5a3ae;
+	--color-gray-100: #f6f6f7;
+	--color-gray-200: #dbdade;
+	--color-gray-300: #c9c7ce;
+	--color-gray-400: #b7b5be;
+	--color-gray-500: #a5a3ae;
+	--color-gray-600: #93909d;
+	--color-gray-700: #817d8d;
+	--color-gray-800: #6f6b7d;
+	--color-gray-900: #5d586c;
+	/*  */
+	--color-success: #28c76f;
+	--color-success-100: #d4f4e2;
+	--color-success-200: #a9e9c5;
+	--color-success-300: #7edda9;
+	--color-success-400: #53d28c;
+	--color-success-500: #28c76f;
+	--color-success-600: #24b364;
+	--color-success-700: #22a95e;
+	--color-success-800: #209f59;
+	--color-success-900: #1e9553;
+	/*  */
+	--color-danger: #ea5455;
+	--color-danger-100: #fbdddd;
+	--color-danger-200: #f7bbbb;
+	--color-danger-300: #f29899;
+	--color-danger-400: #ee7677;
+	--color-danger-500: #ea5455;
+	--color-danger-600: #d34c4d;
+	--color-danger-700: #c74748;
+	--color-danger-800: #bb4344;
+	--color-danger-900: #af3f40;
+	/*  */
+	--color-warning: #ff9f43;
+	--color-warning-100: #ffecd9;
+	--color-warning-200: #ffd9b4;
+	--color-warning-300: #ffc58e;
+	--color-warning-400: #ffb269;
+	--color-warning-500: #ff9f43;
+	--color-warning-600: #e68f3c;
+	--color-warning-700: #d98739;
+	--color-warning-800: #cc7f36;
+	--color-warning-900: #bf7732;
+	/*  */
+	--color-info: #00cfe8;
+	--color-info-100: #ccf5fa;
+	--color-info-200: #99ecf6;
+	--color-info-300: #66e2f1;
+	--color-info-400: #33d9ed;
+	--color-info-500: #00cfe8;
+	--color-info-600: #00bbd1;
+	--color-info-700: #00b0c5;
+	--color-info-800: #00a6ba;
+	--color-info-900: #009bae;
+	/*  */
+	--color-blue: #007bff;
+	--color-indigo: #6610f2;
+	--color-purple: #7367f0;
+	--color-pink: #e83e8c;
+	--color-red: #ea5455;
+	--color-orange: #fd7e14;
+	--color-yellow: #ff9f43;
+	--color-green: #28c76f;
+	--color-teal: #20c997;
+	--color-cyan: #00cfe8;
+	/*  */
+	--color-tooltip: #2f3349;
+	--color-divider: #dbdade;
+	/*  */
+	--color-background: #f8f7fa;
+	/*  */
+	/*  */
+	/*  */
+	--gradient-primary: 133deg, #7367f0 0%, rgba(115, 103, 240, 0.7) 100%;
+	/*  */
+	/*  */
+	/*  */
+	--shadow-primary-sm: 0 2px 3px 0 rgba(115, 103, 240, 0.3);
+	--shadow-primary: 0 4px 16px 0 rgba(115, 103, 240, 0.45);
+	--shadow-primary-lg: 0 10px 20px 0 rgba(115, 103, 240, 0.4);
+	/*  */
+	--shadow-sm: 0 2px 4px 0 rgba(165, 163, 174, 0.3);
+	--shadow-md: 0 4px 16px 0 rgba(165, 163, 174, 0.45);
+	--shadow-lg: 0 10px 20px 5px rgba(165, 163, 174, 0.4);
+	/*  */
+	--shadow-extra: 0 4px 18px 0 rgba(75, 70, 92, 0.1);
+	/*  */
+	/*  */
+	/*  */
+	--text-2xs: 9px;
+	--text-xs: 11px;
+	--text-sm: 13px;
+	--text-base: 15px;
+	--text-lg: 17px;
+	--text-xl: 19px;
+	--text-2xl: 22px;
+	--text-3xl: 32px;
+	--text-4xl: 38px;
+	/*  */
+	/*  */
+	/*  */
+	--default-transition-duration: 250ms;
+	/*  */
+	/*  */
+	/*  */
+	--breakpoint-sm: 576px;
+	--breakpoint-md: 768px;
+	--breakpoint-lg: 992px;
+	--breakpoint-xl: 1200px;
+	--breakpoint-2xl: 1440px;
+}
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@media (prefers-color-scheme: dark) {
+	@theme {
+		/*  */
+		--color-dark-gray: #8692d0;
+		--color-dark-gray-100: #e7e9f6;
+		--color-dark-gray-200: #cfd3ec;
+		--color-dark-gray-300: #b6bee3;
+		--color-dark-gray-400: #aab2de;
+		--color-dark-gray-500: #8692d0;
+		--color-dark-gray-600: #7984bc;
+		--color-dark-gray-700: #5e6692;
+		--color-dark-gray-800: #4a5072;
+		--color-dark-gray-900: #2f3349;
+		/*  */
+		--color-dark-tooltip: #5d586c;
+		--color-dark-divider: #434968;
+		/*  */
+		--color-dark-background: #25293c;
+		/*  */
+		/*  */
+		/*  */
+		--shadow-dark-sm: 0 2px 4px 0 rgba(15, 20, 34, 0.4);
+		--shadow-dark-sm: 0 4px 16px 0 rgba(15, 20, 34, 0.45);
+		--shadow-dark-lg: 0 10px 20px 0 rgba(15, 20, 34, 0.5);
+		/*  */
+		--shadow-dark-extra: 0 4px 20px 0 rgba(15, 20, 34, 0.4);
+	}
+}
+
+html,
+body {
+	overflow-x: hidden;
+}
+
+a:hover,
+button:hover {
+	cursor: pointer;
+}
+
+a,
+button {
+	outline: none;
+}
+
+/*  */
+
+.is-grid {
+	background:
+		linear-gradient(#bbb, transparent 1px),
+		linear-gradient(90deg, #bbb, transparent 1px);
+	background-size: 15px 15px;
+	background-position: 0 0;
+}
+
+.is-edit .react-grid-item .echarts-for-react {
+	pointer-events: none;
+	opacity: 0.5;
+}
+
+.react-grid-item.react-draggable {
+	cursor: move;
+}

package/src/types/component.type.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react'
+
+export type ComponentsTableDataItem = Record<
+	| 'icon'
+	| 'name'
+	| 'description'
+	| 'connects'
+	| 'author'
+	| 'createdAt'
+	| 'editedAt'
+	| 'version',
+	ReactNode
+>

package/src/types/dataset.type.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react'
+
+export type DatasetsTableDataItem = Record<
+	| 'type'
+	| 'name'
+	| 'items'
+	| 'connects'
+	| 'source'
+	| 'author'
+	| 'createdAt'
+	| 'editedAt'
+	| 'updatedAt'
+	| 'status',
+	ReactNode
+>
+
+export type DatasetType =
+	| 'api'
+	| 'txt'
+	| 'csv'
+	| 'xml'
+	| 'xls'
+	| 'xlsx'
+	| 'json'
+	| 'db'

package/src/types/file.type.ts

@@ -0,0 +1,13 @@
+import { DatasetFileEncoding } from '@/graphql'
+
+export interface IFileInfo {
+	id: string
+	file: File
+	progress: number
+}
+
+export interface IDatasetFileInfo {
+	path: string
+	separator: string
+	encoding: DatasetFileEncoding
+}

package/src/types/general.type.ts

@@ -0,0 +1,86 @@
+export interface IWindowSize {
+	width?: number
+	height?: number
+}
+
+/////
+
+export interface IColumnItem {
+	key: string
+	title: string
+	sort?: string
+}
+
+/////
+
+export type SortType = 'asc' | 'desc' | false
+
+export interface ISortItem {
+	column: string
+	order: SortType
+}
+
+/////
+
+export interface IDataQuery {
+	q?: string
+	sort?: string
+	filter?: string
+	page?: string
+	limit?: string
+}
+
+export interface IGetDataOptions {
+	q?: string
+	sort?: ISortItem[]
+	filter?: Record<string, any>
+	page?: number
+	limit?: number
+}
+
+/////
+
+export interface IPaginationOptions {
+	page: number
+	limit: number
+	pages: number
+	total: number
+}
+
+export interface IPagination extends IPaginationOptions {
+	hasPrevPage: boolean
+	hasNextPage: boolean
+	pageNumbers: (number | 'ellipsis')[]
+}
+
+/////
+
+export interface IFilterQuery {
+	querykey: string
+	queryFn: (params: any) => any
+}
+
+/////
+
+export type TranslateFn = (
+	key: string,
+	values?: Record<string, string | number | Date>
+) => string
+
+/////
+
+export enum AccessType {
+	VIEW = 'view',
+	EDIT = 'edit',
+	ALL = 'all'
+}
+
+interface IGuardItem {
+	id: number
+	type: AccessType
+}
+
+export interface IGuard {
+	users: IGuardItem[]
+	groups: IGuardItem[]
+}

package/src/types/index.ts

@@ -0,0 +1,9 @@
+export * from './general.type'
+//
+export type { ComponentsTableDataItem } from './component.type'
+export type { DatasetsTableDataItem, DatasetType } from './dataset.type'
+export type { IDatasetFileInfo, IFileInfo } from './file.type'
+export type { BreakpointType, GridSizeType, LayoutsType } from './layer.type'
+export type { ProjectData, ProjectsTableDataItem } from './project.type'
+export type { UsersTableDataItem } from './user.type'
+export type { WidgetsTableDataItem } from './widget.type'

package/src/types/layer.type.ts

@@ -0,0 +1,7 @@
+import { Layout } from 'react-grid-layout'
+
+export type BreakpointType = 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
+
+export type LayoutsType = Partial<Record<BreakpointType, Layout>>
+
+export type GridSizeType = BreakpointType | 'full'

package/src/types/project.type.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react'
+
+import { ProjectModel, ThemeModel } from '@/graphql'
+
+export type ProjectData = Pick<
+	ProjectModel,
+	'id' | 'name' | 'previewPath' | 'icon' | 'layers'
+> & {
+	theme: Pick<ThemeModel, 'options'>
+}
+
+export type ProjectsTableDataItem = Record<
+	'icon' | 'name' | 'description' | 'author' | 'createdAt' | 'editedAt',
+	ReactNode
+>

package/src/types/user.type.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react'
+
+export type UsersTableDataItem = Record<
+	'profile' | 'username' | 'email' | 'createdAt' | 'editedAt',
+	ReactNode
+>

package/src/types/widget.type.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react'
+
+export type WidgetsTableDataItem = Record<
+	| 'icon'
+	| 'name'
+	| 'description'
+	| 'connects'
+	| 'author'
+	| 'createdAt'
+	| 'editedAt',
+	ReactNode
+>

package/src/utils/bm.util.ts

@@ -0,0 +1,150 @@
+export const _ = {
+	/**
+	 * Проверяет является ли значение булевым
+	 * @param {unknown} value
+	 * @returns {boolean}
+	 */
+	isBoolean(value: unknown): value is boolean {
+		return typeof value === 'boolean'
+	},
+	/**
+	 * Проверяет является ли значение null
+	 * @param {unknown} value
+	 * @returns {boolean}
+	 */
+	isNull(value: unknown): value is null {
+		return value === null
+	},
+	/**
+	 * Проверяет является ли значение undefined
+	 * @param {unknown} value
+	 * @returns {boolean}
+	 */
+	isUndefined(value: unknown): value is undefined {
+		return value === undefined
+	},
+	/**
+	 * Проверяет является ли значение строкой
+	 * @param {unknown} value
+	 * @returns {boolean}
+	 */
+	isString(value: unknown): value is string {
+		return typeof value === 'string'
+	},
+	/**
+	 * Проверяет является ли значение числом
+	 * @param {unknown} value
+	 * @returns {boolean}
+	 */
+	isNumber(value: unknown): value is number {
+		return typeof value === 'number'
+	},
+	/**
+	 * Проверяет является ли значение датой
+	 * @param {unknown} value
+	 * @returns {boolean}
+	 */
+	isDate(value: unknown): value is Date {
+		return value instanceof Date
+	},
+	/**
+	 * Проверяет является ли значение массивом
+	 * @param {unknown} value
+	 * @returns {boolean}
+	 */
+	isArray(value: unknown): value is Array<unknown> {
+		return Array.isArray(value)
+	},
+	/**
+	 * Проверяет является ли значение объектом
+	 * @param {unknown} value
+	 * @returns {boolean}
+	 */
+	isObject(value: unknown): value is Record<string, unknown> {
+		return (
+			typeof value === 'object' &&
+			!this.isNull(value) &&
+			!this.isArray(value) &&
+			!this.isDate(value) &&
+			!(value instanceof RegExp) &&
+			!(value instanceof Map) &&
+			!(value instanceof Set)
+		)
+	},
+	//////////////////////////////
+	/**
+	 * Проверка на пустое значение (null, undefined, '', [], {})
+	 * @param {unknown} value
+	 * @returns {boolean}
+	 */
+	isEmpty(value: unknown) {
+		if (this.isNull(value) || this.isUndefined(value)) return true
+		if (this.isString(value) || this.isArray(value)) {
+			return value.length === 0
+		}
+		if (this.isObject(value)) {
+			return Object.keys(value).length === 0
+		}
+		return false
+	},
+	//////////////////////////////
+	/**
+	 * Приведение значения к булевому значению
+	 * @param {unknown} value
+	 * @returns {boolean}
+	 */
+	toBoolean(value: unknown): boolean {
+		if (this.isString(value)) {
+			const lowerValue = value.trim().toLowerCase()
+			if (lowerValue === 'true') {
+				return true
+			}
+			if (lowerValue === 'false') {
+				return false
+			}
+		}
+
+		return Boolean(value)
+	},
+	/**
+	 * Приведение значения к числу
+	 * @param {unknown} value
+	 * @returns {number}
+	 */
+	toNumber(value: unknown): number {
+		if (this.isString(value)) {
+			const trimmedValue = value.trim()
+
+			if (trimmedValue === '') {
+				return 0
+			}
+
+			const num = Number(trimmedValue)
+
+			if (!isNaN(num) && isFinite(num)) {
+				return num
+			}
+
+			const lowerValue = trimmedValue.toLowerCase()
+			if (lowerValue === 'true') {
+				return 1
+			}
+			if (lowerValue === 'false') {
+				return 0
+			}
+
+			return 0
+		}
+
+		if (this.isNull(value) || this.isUndefined(value) || value === false) {
+			return 0
+		}
+
+		if (value === true) {
+			return 1
+		}
+
+		const num = Number(value)
+		return isNaN(num) || !isFinite(num) ? 0 : num
+	}
+}

package/src/utils/bytes.util.ts

@@ -0,0 +1,110 @@
+const b = 1
+const kb = b * 1024
+const mb = kb * 1024
+const gb = mb * 1024
+const tb = gb * 1024
+const pb = tb * 1024
+
+type SizeUnit =
+	| 'Bytes'
+	| 'Byte'
+	| 'B'
+	| 'Kilobytes'
+	| 'Kilobyte'
+	| 'Kb'
+	| 'KB'
+	| 'K'
+	| 'Megabytes'
+	| 'Megabyte'
+	| 'Mb'
+	| 'MB'
+	| 'M'
+	| 'Gigabytes'
+	| 'Gigabyte'
+	| 'Gb'
+	| 'GB'
+	| 'G'
+	| 'Terabytes'
+	| 'Terabyte'
+	| 'Tb'
+	| 'TB'
+	| 'T'
+	| 'Petabytes'
+	| 'Petabyte'
+	| 'Pb'
+	| 'PB'
+	| 'P'
+
+type SizeUnitAnyCase = SizeUnit | Uppercase<SizeUnit> | Lowercase<SizeUnit>
+
+export type SizeStringValue =
+	| `${number}`
+	| `${number}${SizeUnitAnyCase}`
+	| `${number} ${SizeUnitAnyCase}`
+
+/**
+ * Парсит строку с размером файла и возвращает размер в байтах
+ * @param str - строка с размером, например '2GB', '1.5 MB', '512kb', '1024'
+ * @returns размер в байтах
+ * 
+ * @example
+ * bytes('2GB') // вернет 2147483648
+ * bytes('1.5 MB') // вернет 1572864
+ * bytes('512kb') // вернет 524288
+ * bytes('1024') // вернет 1024 (байты по умолчанию)
+ */
+export const bytes = (str: SizeStringValue): number => {
+	if (typeof str !== 'string' || str.length === 0 || str.length > 100) {
+		throw new Error(
+			'Value provided to bytes() must be a string with length between 1 and 99.'
+		)
+	}
+
+	const match =
+		/^(?<value>-?(?:\d+)?\.?\d+) *(?<type>bytes?|b|kilobytes?|kb|k|megabytes?|mb|m|gigabytes?|gb|g|terabytes?|tb|t|petabytes?|pb|p)?$/i.exec(
+			str
+		)
+
+	const groups = match?.groups as { value: string; type?: string } | undefined
+	if (!groups) {
+		return NaN
+	}
+	const n = parseFloat(groups.value)
+	const type = (groups.type || 'b').toLowerCase() as Lowercase<SizeUnit>
+
+	switch (type) {
+		case 'petabytes':
+		case 'petabyte':
+		case 'pb':
+		case 'p':
+			return n * pb
+		case 'terabytes':
+		case 'terabyte':
+		case 'tb':
+		case 't':
+			return n * tb
+		case 'gigabytes':
+		case 'gigabyte':
+		case 'gb':
+		case 'g':
+			return n * gb
+		case 'megabytes':
+		case 'megabyte':
+		case 'mb':
+		case 'm':
+			return n * mb
+		case 'kilobytes':
+		case 'kilobyte':
+		case 'kb':
+		case 'k':
+			return n * kb
+		case 'bytes':
+		case 'byte':
+		case 'b':
+			return n
+		default:
+			throw new Error(
+				`Error: size unit ${type} was recognized but does not have a corresponding case. Please check the input.`
+			)
+	}
+}

package/src/utils/date.util.ts

@@ -0,0 +1,49 @@
+import dayjs from 'dayjs'
+import 'dayjs/locale/ru'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import updateLocale from 'dayjs/plugin/updateLocale'
+
+dayjs.extend(relativeTime)
+dayjs.extend(updateLocale)
+
+dayjs.locale('ru')
+
+dayjs.updateLocale('ru', {
+	relativeTime: {
+		past: '%s назад',
+		s: 'несколько секунд',
+		m: '1 минута',
+		mm: '%d минут',
+		h: '1 час',
+		hh: '%d часов',
+		d: '1 день',
+		dd: '%d дней'
+	}
+})
+
+export function isWeekPassed(fromDate: string | number | Date): boolean {
+	const startDate = dayjs(fromDate)
+	const dateAfter7Days = startDate.add(7, 'day')
+	return dayjs().isAfter(dateAfter7Days)
+}
+
+export function fromNow(fromDate: string | number | Date): string {
+	return dayjs(fromDate).fromNow()
+}
+
+export function getFormatDate(
+	date: string | number | Date,
+	locale: string
+): string {
+	const getDateFormat = (locale: string) => {
+		switch (locale) {
+			case 'en':
+				return 'MM/DD/YYYY, hh:mm A'
+			case 'ru':
+			default:
+				return 'DD.MM.YYYY, HH:mm'
+		}
+	}
+
+	return dayjs(date).format(getDateFormat(locale))
+}