bmdl-sdk 1.5.8 → 2.0.0

package/src/contexts/CreateComponentContext/index.ts

@@ -0,0 +1,4 @@
+export {
+	CreateComponentContext,
+	type CreateComponentContextProps
+} from './CreateComponentContext'

package/src/contexts/CreateDatasetContext/CreateDatasetContext.tsx

@@ -0,0 +1,25 @@
+import { createContext, Dispatch, SetStateAction } from 'react'
+
+import { ColumnInput } from '@/graphql'
+
+import { IDatasetFileInfo, IFileInfo } from '@/types'
+
+export type CreateDatasetContextProps = {
+	name: string
+	setName: Dispatch<SetStateAction<string>>
+	//
+	sourceType: string
+	setSourceType: Dispatch<SetStateAction<string>>
+	//
+	fileInfo: IFileInfo | null
+	setFileInfo: Dispatch<SetStateAction<IFileInfo | null>>
+	//
+	datasetFileInfo: IDatasetFileInfo
+	setDatasetFileInfo: Dispatch<SetStateAction<IDatasetFileInfo>>
+	//
+	columns: ColumnInput[]
+	setColumns: Dispatch<SetStateAction<ColumnInput[]>>
+}
+
+export const CreateDatasetContext =
+	createContext<CreateDatasetContextProps | null>(null)

package/src/contexts/CreateDatasetContext/index.ts

@@ -0,0 +1,4 @@
+export {
+	CreateDatasetContext,
+	type CreateDatasetContextProps
+} from './CreateDatasetContext'

package/src/contexts/ProjectContext/ProjectContext.tsx

@@ -0,0 +1,32 @@
+import { createContext, Dispatch, RefObject, SetStateAction } from 'react'
+
+import { LayerModel } from '@/graphql'
+
+import { GridSizeType, LayoutsType, ProjectData } from '@/types'
+
+export type ProjectContextProps = {
+	project: ProjectData
+	//
+	layer: LayerModel | undefined
+	setLayer: Dispatch<SetStateAction<LayerModel | undefined>>
+	//
+	layouts: LayoutsType
+	setLayouts: Dispatch<SetStateAction<LayoutsType>>
+	//
+	tempLayouts: LayoutsType
+	setTempLayouts: Dispatch<SetStateAction<LayoutsType>>
+	// 
+	isEdit: boolean
+	setIsEdit: Dispatch<SetStateAction<boolean>>
+	//
+	gridKey: number
+	setGridKey: Dispatch<SetStateAction<number>>
+	//
+	gridSize: GridSizeType
+	setGridSize: Dispatch<SetStateAction<GridSizeType>>
+	//
+	saveHandler: () => void
+	cancelHandler: () => void
+}
+
+export const ProjectContext = createContext<ProjectContextProps | null>(null)

package/src/contexts/ProjectContext/index.ts

@@ -0,0 +1 @@
+export { ProjectContext, type ProjectContextProps } from './ProjectContext'

package/src/contexts/SidebarContext/SidebarContext.tsx

@@ -0,0 +1,10 @@
+import { createContext } from 'react'
+
+export type SidebarContextProps = {
+	isMobile: boolean
+	isOpen: boolean
+	setIsOpen: (value: boolean) => void
+	toggleSidebar: () => void
+}
+
+export const SidebarContext = createContext<SidebarContextProps | null>(null)

package/src/contexts/SidebarContext/index.ts

@@ -0,0 +1 @@
+export { SidebarContext, type SidebarContextProps } from './SidebarContext'

package/src/contexts/index.ts

@@ -0,0 +1,10 @@
+export {
+	CreateComponentContext,
+	type CreateComponentContextProps
+} from './CreateComponentContext'
+export {
+	CreateDatasetContext,
+	type CreateDatasetContextProps
+} from './CreateDatasetContext'
+export { ProjectContext, type ProjectContextProps } from './ProjectContext'
+export { SidebarContext, type SidebarContextProps } from './SidebarContext'

package/src/hooks/index.ts

@@ -0,0 +1,9 @@
+export { useCreateComponent } from './useCreateComponent'
+export { useCreateDataset } from './useCreateDataset'
+export { useDebounce } from './useDebounce'
+export { useDebounced } from './useDebounced'
+export { useIsMobile } from './useIsMobile'
+export { useSidebar } from './useSidebar'
+export { useStickyHeader } from './useStickyHeader'
+export { useWindowSize } from './useWindowSize'
+

package/src/hooks/useCreateComponent.ts

@@ -0,0 +1,15 @@
+'use client'
+
+import { useContext } from 'react'
+
+import { CreateComponentContext } from '@/contexts'
+
+export function useCreateComponent() {
+	const context = useContext(CreateComponentContext)
+	//
+	if (!context) {
+		throw new Error('useCreateComponent')
+	}
+	//
+	return context
+}

package/src/hooks/useCreateDataset.ts

@@ -0,0 +1,15 @@
+'use client'
+
+import { useContext } from 'react'
+
+import { CreateDatasetContext } from '@/contexts'
+
+export function useCreateDataset() {
+	const context = useContext(CreateDatasetContext)
+	//
+	if (!context) {
+		throw new Error('useCreateDataset')
+	}
+	//
+	return context
+}

package/src/hooks/useDebounce.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react'
+
+export function useDebounce(value?: string, delay = 500) {
+	const [debouncedValue, setDebouncedValue] = useState(value)
+
+	useEffect(() => {
+		const handler = setTimeout(() => {
+			setDebouncedValue(value)
+		}, delay)
+
+		return () => {
+			clearTimeout(handler)
+		}
+	}, [value, delay])
+
+	return debouncedValue
+}

package/src/hooks/useDebounced.ts

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useRef } from 'react'
+
+export function useDebounced<T extends (...args: any[]) => any>(
+	callback: T,
+	delay: number
+): T {
+	const timeoutRef = useRef<NodeJS.Timeout>(null)
+
+	const debouncedCallback = useCallback(
+		(...args: Parameters<T>) => {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current)
+			}
+
+			timeoutRef.current = setTimeout(() => {
+				callback(...args)
+			}, delay)
+		},
+		[callback, delay]
+	)
+
+	useEffect(() => {
+		return () => {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current)
+			}
+		}
+	}, [])
+
+	return debouncedCallback as T
+}

package/src/hooks/useIsMobile.ts

@@ -0,0 +1,27 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+export function useIsMobile() {
+	const [isMobile, setIsMobile] = useState(false)
+
+	useEffect(() => {
+		if (typeof window === 'undefined') return
+
+		const mediaQuery = window.matchMedia('(max-width: 992px)')
+
+		const checkIsMobile = () => {
+			setIsMobile(mediaQuery.matches)
+		}
+
+		mediaQuery.addEventListener('change', checkIsMobile)
+		window.addEventListener('resize', checkIsMobile)
+
+		return () => {
+			mediaQuery.removeEventListener('change', checkIsMobile)
+			window.removeEventListener('resize', checkIsMobile)
+		}
+	}, [])
+
+	return isMobile
+}

package/src/hooks/useSidebar.ts

@@ -0,0 +1,15 @@
+'use client'
+
+import { useContext } from 'react'
+
+import { SidebarContext } from '@/contexts'
+
+export function useSidebar() {
+	const context = useContext(SidebarContext)
+	//
+	if (!context) {
+		throw new Error('useSidebar')
+	}
+	//
+	return context
+}

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