bmdl-sdk 1.5.9 → 2.0.1

package/src/hooks/useStickyHeader.ts

@@ -0,0 +1,35 @@
+import { RefObject, useCallback, useEffect } from 'react'
+
+export function useStickyHeader(
+	scrollContainerRef: RefObject<HTMLDivElement | null>,
+	headerRef: RefObject<HTMLTableSectionElement | null>
+) {
+	const handleScroll = useCallback(() => {
+		const container = scrollContainerRef.current
+		const header = headerRef.current
+
+		if (!container || !header) return
+
+		const scrollTop = container.scrollTop
+		header.style.transform = `translateY(${scrollTop ? scrollTop - 1 : scrollTop}px)`
+		header.style.position = 'relative'
+		header.style.zIndex = '10'
+	}, [scrollContainerRef, headerRef])
+
+	useEffect(() => {
+		const container = scrollContainerRef.current
+		if (!container) return
+
+		container.addEventListener('scroll', handleScroll, { passive: true })
+
+		return () => {
+			container.removeEventListener('scroll', handleScroll)
+			const header = headerRef.current
+			if (header) {
+				header.style.transform = ''
+				header.style.position = ''
+				header.style.zIndex = ''
+			}
+		}
+	}, [handleScroll, headerRef])
+}

package/src/hooks/useWindowSize.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react'
+
+import { IWindowSize } from '@/types'
+
+export function useWindowSize() {
+	const [windowSize, setWindowSize] = useState<IWindowSize>({
+		width: undefined,
+		height: undefined
+	})
+
+	useEffect(() => {
+		function handleResize() {
+			setWindowSize({
+				width: window.innerWidth,
+				height: window.innerHeight
+			})
+		}
+
+		handleResize()
+
+		window.addEventListener('resize', handleResize)
+
+		return () => window.removeEventListener('resize', handleResize)
+	}, [])
+
+	return windowSize
+}

package/src/providers/CreateComponentProvider/CreateComponentProvider.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { type ReactNode, useMemo, useState } from 'react'
+
+import { IFileInfo } from '@/types'
+
+import {
+	CreateComponentContext,
+	type CreateComponentContextProps
+} from '@/contexts'
+
+type CreateComponentProviderProps = {
+	children: ReactNode
+}
+
+export function CreateComponentProvider({
+	children
+}: CreateComponentProviderProps) {
+	const [name, setName] = useState<string>('')
+	//
+	const [fileInfo, setFileInfo] = useState<IFileInfo | null>(null)
+	//
+	const [componentPath, setComponentPath] = useState('')
+
+	const contextValue = useMemo<CreateComponentContextProps>(
+		() => ({
+			name,
+			setName,
+			//
+			fileInfo,
+			setFileInfo,
+			//
+			componentPath,
+			setComponentPath
+		}),
+		[
+			name,
+			setName,
+			//
+			fileInfo,
+			setFileInfo,
+			//
+			componentPath,
+			setComponentPath
+		]
+	)
+
+	return (
+		<CreateComponentContext.Provider value={contextValue}>
+			{children}
+		</CreateComponentContext.Provider>
+	)
+}

package/src/providers/CreateComponentProvider/index.ts

@@ -0,0 +1 @@
+export { CreateComponentProvider } from './CreateComponentProvider'

package/src/providers/CreateDatasetProvider/CreateDatasetProvider.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import { type ReactNode, useMemo, useState } from 'react'
+
+import { IDatasetFileInfo, IFileInfo } from '@/types'
+
+import {
+	CreateDatasetContext,
+	type CreateDatasetContextProps
+} from '@/contexts'
+
+type CreateDatasetProviderProps = {
+	children: ReactNode
+}
+
+export function CreateDatasetProvider({
+	children
+}: CreateDatasetProviderProps) {
+	const [name, setName] = useState<string>('')
+	//
+	const [sourceType, setSourceType] = useState<string>('source')
+	//
+	const [fileInfo, setFileInfo] = useState<IFileInfo | null>(null)
+	//
+	const [datasetFileInfo, setDatasetFileInfo] = useState<IDatasetFileInfo>({
+		path: '',
+		separator: ';',
+		encoding: 'utf-8'
+	})
+	//
+	const [columns, setColumns] = useState<any[]>([])
+
+	const contextValue = useMemo<CreateDatasetContextProps>(
+		() => ({
+			name,
+			setName,
+			//
+			sourceType,
+			setSourceType,
+			//
+			fileInfo,
+			setFileInfo,
+			//
+			datasetFileInfo,
+			setDatasetFileInfo,
+			//
+			columns,
+			setColumns
+		}),
+		[
+			name,
+			setName,
+			//
+			sourceType,
+			setSourceType,
+			//
+			fileInfo,
+			setFileInfo,
+			//
+			datasetFileInfo,
+			setDatasetFileInfo,
+			//
+			columns,
+			setColumns
+		]
+	)
+
+	return (
+		<CreateDatasetContext.Provider value={contextValue}>
+			{children}
+		</CreateDatasetContext.Provider>
+	)
+}

package/src/providers/CreateDatasetProvider/index.ts

@@ -0,0 +1 @@
+export { CreateDatasetProvider } from './CreateDatasetProvider'

package/src/providers/LangProvider/LangProvider.tsx

@@ -0,0 +1,15 @@
+import { NextIntlClientProvider } from 'next-intl'
+import { getMessages } from 'next-intl/server'
+import { type ComponentProps } from 'react'
+
+type LangProviderProps = ComponentProps<typeof NextIntlClientProvider>
+
+export async function LangProvider({ children, ...props }: LangProviderProps) {
+	const messages = await getMessages()
+
+	return (
+		<NextIntlClientProvider messages={messages} {...props}>
+			{children}
+		</NextIntlClientProvider>
+	)
+}

package/src/providers/LangProvider/index.ts

@@ -0,0 +1 @@
+export { LangProvider } from './LangProvider'

package/src/providers/ProjectProvider/ProjectProvider.tsx

@@ -0,0 +1,110 @@
+'use client'
+
+import { type ReactNode, useMemo, useState } from 'react'
+
+import { LayerModel, useUpdateLayerMutation } from '@/graphql'
+
+import { GridSizeType, LayoutsType, ProjectData } from '@/types'
+
+import { ProjectContext, type ProjectContextProps } from '@/contexts'
+
+type ProjectProviderProps = {
+	project: ProjectData
+	children: ReactNode
+}
+
+export function ProjectProvider({ project, children }: ProjectProviderProps) {
+	const [layer, setLayer] = useState<LayerModel>()
+	const [layouts, setLayouts] = useState<LayoutsType>({})
+	const [tempLayouts, setTempLayouts] = useState<LayoutsType>({})
+	//
+	const [isEdit, setIsEdit] = useState(false)
+	const [gridKey, setGridKey] = useState(0)
+	const [gridSize, setGridSize] = useState<GridSizeType>('full')
+
+	const [updateLayer] = useUpdateLayerMutation({
+		onCompleted() {
+			setLayouts(tempLayouts)
+			//
+			setIsEdit(false)
+			setGridSize('full')
+		}
+	})
+
+	const saveHandler = () => {
+		updateLayer({
+			variables: {
+				data: {
+					projectId: project.id,
+					layerId: layer!.id,
+					layouts: tempLayouts
+				}
+			}
+		})
+	}
+
+	const cancelHandler = () => {
+		setTempLayouts(layouts)
+		//
+		setIsEdit(false)
+		setGridKey(Math.random())
+		setGridSize('full')
+	}
+
+	const contextValue = useMemo<ProjectContextProps>(
+		() => ({
+			project,
+			//
+			layer,
+			setLayer,
+			//
+			layouts,
+			setLayouts,
+			//
+			tempLayouts,
+			setTempLayouts,
+			//
+			isEdit,
+			setIsEdit,
+			//
+			gridKey,
+			setGridKey,
+			//
+			gridSize,
+			setGridSize,
+			//
+			saveHandler,
+			cancelHandler
+		}),
+		[
+			project,
+			//
+			layer,
+			setLayer,
+			//
+			layouts,
+			setLayouts,
+			//
+			tempLayouts,
+			setTempLayouts,
+			//
+			isEdit,
+			setIsEdit,
+			//
+			gridKey,
+			setGridKey,
+			//
+			gridSize,
+			setGridSize,
+			//
+			saveHandler,
+			cancelHandler
+		]
+	)
+
+	return (
+		<ProjectContext.Provider value={contextValue}>
+			{children}
+		</ProjectContext.Provider>
+	)
+}

package/src/providers/ProjectProvider/index.ts

@@ -0,0 +1 @@
+export { ProjectProvider } from './ProjectProvider'

package/src/providers/SidebarProvider/SidebarProvider.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { type ReactNode, useEffect, useMemo } from 'react'
+
+import { sidebarStore } from '@/store'
+
+import { SidebarContext, type SidebarContextProps } from '@/contexts'
+import { useIsMobile } from '@/hooks'
+
+type SidebarProviderProps = {
+	children: ReactNode
+}
+
+export function SidebarProvider({ children }: SidebarProviderProps) {
+	const isMobile = useIsMobile()
+	const isOpen = sidebarStore(state => state.isOpen)
+	const setIsOpen = sidebarStore(state => state.setIsOpen)
+
+	const toggleSidebar = () => {
+		setIsOpen(!isOpen)
+	}
+
+	const handleKeyDown = (e: KeyboardEvent) => {
+		if (e.code === 'KeyB' && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault()
+			toggleSidebar()
+		}
+	}
+
+	useEffect(() => {
+		window.addEventListener('keydown', handleKeyDown)
+		//
+		return () => window.removeEventListener('keydown', handleKeyDown)
+	}, [])
+
+	const contextValue = useMemo<SidebarContextProps>(
+		() => ({
+			isOpen,
+			isMobile,
+			setIsOpen,
+			toggleSidebar
+		}),
+		[isOpen, isMobile, setIsOpen, toggleSidebar]
+	)
+
+	return (
+		<SidebarContext.Provider value={contextValue}>
+			{children}
+		</SidebarContext.Provider>
+	)
+}

package/src/providers/SidebarProvider/index.ts

@@ -0,0 +1 @@
+export { SidebarProvider } from './SidebarProvider'

package/src/providers/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import { type ComponentProps } from 'react'
+
+type ThemeProviderProps = ComponentProps<typeof NextThemesProvider>
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+	return (
+		<NextThemesProvider
+			attribute='class'
+			defaultTheme='system'
+			enableSystem
+			disableTransitionOnChange
+			{...props}
+		>
+			{children}
+		</NextThemesProvider>
+	)
+}

package/src/providers/ThemeProvider/index.ts

@@ -0,0 +1 @@
+export { ThemeProvider } from './ThemeProvider'

package/src/providers/index.ts

@@ -0,0 +1,6 @@
+export { CreateComponentProvider } from './CreateComponentProvider'
+export { CreateDatasetProvider } from './CreateDatasetProvider'
+export { LangProvider } from './LangProvider'
+export { SidebarProvider } from './SidebarProvider'
+export { ThemeProvider } from './ThemeProvider'
+

package/src/store/index.ts

@@ -0,0 +1,2 @@
+export { sidebarStore } from './sidebar/sidebar.store'
+

package/src/store/sidebar/sidebar.store.ts

@@ -0,0 +1,17 @@
+import { create } from 'zustand'
+import { createJSONStorage, persist } from 'zustand/middleware'
+
+import type { SidebarStore } from './sidebar.type'
+
+export const sidebarStore = create(
+	persist<SidebarStore>(
+		set => ({
+			isOpen: false,
+			setIsOpen: (value: boolean) => set({ isOpen: value })
+		}),
+		{
+			name: 'sidebar',
+			storage: createJSONStorage(() => localStorage)
+		}
+	)
+)

package/src/store/sidebar/sidebar.type.ts

@@ -0,0 +1,4 @@
+export interface SidebarStore {
+	isOpen: boolean
+	setIsOpen: (value: boolean) => void
+}

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
+}