bmdl-sdk 1.5.9 → 2.0.1

package/src/components/organisms/DatasetsTable/Source/Source.utils.tsx

@@ -0,0 +1,45 @@
+import { FileModel, SourceModel } from '@/graphql'
+
+import {
+	TbApi,
+	TbDatabase,
+	TbFileTypeCsv,
+	TbFileTypeXls,
+	TbFileTypeXml,
+	TbJson
+} from 'react-icons/tb'
+
+import { DatasetType } from '@/types'
+
+export const getSourceType = (source: SourceModel | FileModel): DatasetType => {
+	console.log('source', source);
+	
+	if ('ext' in source!) {
+		return source.ext.toLowerCase() as DatasetType
+	}
+	//
+	if (source.type === 'POLYMATICA') {
+		return 'api'
+	}
+	//
+	return 'db'
+}
+
+export const getSourceIcon = (type: DatasetType) => {
+	switch (type) {
+		case 'api':
+			return TbApi
+		case 'txt':
+		case 'csv':
+			return TbFileTypeCsv
+		case 'xml':
+			return TbFileTypeXml
+		case 'xls':
+		case 'xlsx':
+			return TbFileTypeXls
+		case 'json':
+			return TbJson
+		default:
+			return TbDatabase
+	}
+}

package/src/components/organisms/DatasetsTable/Source/index.ts

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

package/src/components/organisms/DatasetsTable/Status/Status.styles.ts

@@ -0,0 +1,25 @@
+import { cva, VariantProps } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const rootStyles = cva(
+	twJoin({
+		display: 'flex size-7.5 items-center justify-center',
+		visual: 'rounded-full',
+		childs: '[&_svg]:size-5.5'
+	}),
+	{
+		variants: {
+			status: {
+				pending: 'text-info bg-info/15',
+				success: 'text-success bg-success/15',
+				error: 'text-danger bg-danger/15'
+			}
+		},
+		defaultVariants: {
+			status: 'pending'
+		}
+	}
+)
+
+export type RootStylesProps = VariantProps<typeof rootStyles>

package/src/components/organisms/DatasetsTable/Status/Status.tsx

@@ -0,0 +1,29 @@
+// import { useTranslations } from 'next-intl'
+// import { type ComponentProps } from 'react'
+
+// import { Tooltip } from '@/components/atoms'
+
+// import { rootStyles } from './Status.styles'
+
+// import { getSourceIcon, toNormilizeCase } from './Status.utils'
+
+// type StatusProps = ComponentProps<'span'> & {
+// 	status?: any
+// }
+
+// function Status({ status }: StatusProps) {
+// 	const t = useTranslations('status')
+// 	//
+// 	const Icon = getSourceIcon(status!)
+// 	//
+// 	return (
+// 		<Tooltip title={t(toNormilizeCase(status!))} side='left'>
+// 			<span className={rootStyles({ status: toNormilizeCase(status!) })}>
+// 				<Icon />
+// 			</span>
+// 		</Tooltip>
+// 	)
+// }
+
+// export { Status }
+

package/src/components/organisms/DatasetsTable/Status/Status.utils.tsx

@@ -0,0 +1,29 @@
+// import { TbAlertCircle, TbCircleArrowDown, TbCircleCheck } from 'react-icons/tb'
+
+// export const getSourceIcon = (status: DatasetStatus) => {
+// 	switch (status) {
+// 		case DatasetStatus.Success:
+// 			return TbCircleCheck
+// 		case DatasetStatus.Error:
+// 			return TbAlertCircle
+// 		default:
+// 			return TbCircleArrowDown
+// 	}
+// }
+
+// ////////////
+
+// export const toNormilizeCase = (
+// 	status: DatasetStatus
+// ): 'pending' | 'success' | 'error' => {
+// 	switch (status) {
+// 		case DatasetStatus.Pending:
+// 			return 'pending'
+// 		case DatasetStatus.Success:
+// 			return 'success'
+// 		case DatasetStatus.Error:
+// 			return 'error'
+// 		default:
+// 			return 'pending'
+// 	}
+// }

package/src/components/organisms/DatasetsTable/Status/index.ts

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

package/src/components/organisms/DatasetsTable/Type/Type.styles.ts

@@ -0,0 +1,7 @@
+import { twJoin } from '@/utils'
+
+export const rootStyles = twJoin({
+	display: 'inline-block w-5.5',
+	text: 'align-middle',
+	childs: '[&_svg]:size-5.5'
+})

package/src/components/organisms/DatasetsTable/Type/Type.tsx

@@ -0,0 +1,32 @@
+// import { useTranslations } from 'next-intl'
+// import { type ComponentProps } from 'react'
+
+// import { TbTable, TbTableAlias } from 'react-icons/tb'
+
+// import { Tooltip, Typography } from '@/components/atoms'
+
+// import { rootStyles } from './Type.styles'
+
+// import { toNormilizeCase } from './Type.utils'
+
+// const { Text } = Typography
+
+// type TypeProps = ComponentProps<'span'> & {
+// 	type: DatasetType
+// }
+
+// function Type({ type }: TypeProps) {
+// 	const t = useTranslations('datasets.type')
+// 	//
+// 	const Icon = type === DatasetType.Local ? TbTable : TbTableAlias
+// 	//
+// 	return (
+// 		<Tooltip title={t(toNormilizeCase(type))} side='right'>
+// 			<Text className={rootStyles}>
+// 				<Icon />
+// 			</Text>
+// 		</Tooltip>
+// 	)
+// }
+
+// export { Type }

package/src/components/organisms/DatasetsTable/Type/Type.utils.tsx

@@ -0,0 +1,14 @@
+// import { DatasetType } from '@/graphql'
+
+// ////////////
+
+// export const toNormilizeCase = (type: DatasetType): 'local' | 'joined' => {
+// 	switch (type) {
+// 		case DatasetType.Local:
+// 			return 'local'
+// 		case DatasetType.Joined:
+// 			return 'joined'
+// 		default:
+// 			return 'local'
+// 	}
+// }

package/src/components/organisms/DatasetsTable/Type/index.ts

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

package/src/components/organisms/DatasetsTable/index.ts

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

package/src/components/organisms/index.ts

@@ -0,0 +1,3 @@
+export { ComponentWidget } from './ComponentWidget'
+// export { DatasetsTable } from './DatasetsTable'
+

package/src/components/templates/DefaultLayout/DefaultLayout.styles.ts

@@ -0,0 +1,26 @@
+import { twJoin } from '@/utils'
+
+export const sidebarWrapperStyles = twJoin({
+	tw: 'group/sidebar-wrapper',
+	display: 'flex min-h-svh w-full'
+})
+
+export const pageWrapperStyles = twJoin({
+	position: 'relative',
+	display: 'flex min-h-screen w-full flex-col px-6.5 pt-4',
+	visual: 'bg-background',
+	//
+	dark: 'dark:bg-dark-background'
+})
+
+export const headerBackdropStyles = twJoin({
+	position: 'fixed top-0 left-0',
+	display: 'h-19.5 w-full',
+	visual: 'bg-background/70 backdrop-blur-xs',
+	dark: 'dark:bg-dark-background/80'
+})
+
+export const contentWrapperStyles = twJoin({
+	position: 'relative',
+	display: 'pt-6.5'
+})

package/src/components/templates/DefaultLayout/DefaultLayout.tsx

@@ -0,0 +1,41 @@
+import { type ReactNode } from 'react'
+
+import { Typography } from '@/components/atoms'
+
+import { Header, Sidebar } from '@/components/molecules'
+
+import { SidebarProvider } from '@/providers'
+
+import {
+	contentWrapperStyles,
+	headerBackdropStyles,
+	pageWrapperStyles,
+	sidebarWrapperStyles
+} from './DefaultLayout.styles'
+
+const { Title } = Typography
+
+type DefaultLayoutProps = {
+	title: string
+	children: ReactNode
+}
+
+export function DefaultLayout({ title, children }: DefaultLayoutProps) {
+	return (
+		<div className={sidebarWrapperStyles}>
+			<SidebarProvider>
+				<Sidebar />
+				<div className={pageWrapperStyles}>
+					<Header />
+					<div className={contentWrapperStyles}>
+						<div className={headerBackdropStyles}></div>
+						<Title level={4} className='mb-6.5'>
+							{title}
+						</Title>
+						{children}
+					</div>
+				</div>
+			</SidebarProvider>
+		</div>
+	)
+}

package/src/components/templates/DefaultLayout/index.ts

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

package/src/components/templates/PageLayout/PageLayout.styles.ts

@@ -0,0 +1,25 @@
+import { twJoin } from '@/utils'
+
+export const rootStyles = twJoin({
+	display: 'mx-auto w-330 p-8'
+})
+
+// /////////////////////////
+
+export const bgStyles = twJoin({
+	display: 'h-[calc(100vh-64px)] w-full',
+	visual: ' rounded-2xl bg-cover bg-center'
+})
+
+// /////////////////////////
+
+export const gridStyles = twJoin({
+	display: 'grid grid-cols-24 items-center'
+})
+
+// /////////////////////////
+
+export const contentStyles = twJoin({
+	display: 'm-auto flex h-[35vh] flex-col items-center justify-center',
+	text: 'text-center'
+})

package/src/components/templates/PageLayout/PageLayout.tsx

@@ -0,0 +1,28 @@
+import clsx from 'clsx'
+import { type ReactNode } from 'react'
+
+import {
+	bgStyles,
+	contentStyles,
+	gridStyles,
+	rootStyles
+} from './PageLayout.styles'
+
+type PageLayoutProps = {
+	className?: string
+	children: ReactNode
+}
+
+export function PageLayout({ className, children }: PageLayoutProps) {
+	return (
+		<div className={rootStyles}>
+			<div className={clsx(bgStyles, className)}>
+				<div className={gridStyles}>
+					<div className='col-span-16 col-start-5'>
+						<div className={contentStyles}>{children}</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}

package/src/components/templates/PageLayout/index.ts

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

package/src/components/templates/index.ts

@@ -0,0 +1,3 @@
+export { DefaultLayout } from './DefaultLayout'
+export { PageLayout } from './PageLayout'
+

package/src/config/i18n.config.ts

@@ -0,0 +1,46 @@
+import { getRequestConfig } from 'next-intl/server'
+import { cookies } from 'next/headers'
+
+const COOKIE_NAME = 'language'
+const languages = ['ru', 'en']
+const defaultLanguage: Language = 'ru'
+
+type Language = (typeof languages)[number]
+
+////////////
+
+export async function getCurrentLanguage() {
+	const cookiesStore = await cookies()
+
+	const language = cookiesStore.get(COOKIE_NAME)?.value ?? defaultLanguage
+
+	return language
+}
+
+////////////
+
+export async function setCurrentLanguage(language: Language) {
+	const cookiesStore = await cookies()
+
+	return cookiesStore.set(COOKIE_NAME, language)
+}
+
+////////////
+
+export default getRequestConfig(async () => {
+	const language = await getCurrentLanguage()
+
+	return {
+		locale: language,
+		messages: {
+			datasets: (
+				await import(`../../public/locales/${language}/datasets.json`)
+			).default,
+			errors: (
+				await import(`../../public/locales/${language}/errors.json`)
+			).default,
+			...(await import(`../../public/locales/${language}/general.json`))
+				.default
+		}
+	}
+})

package/src/constants/index.ts

@@ -0,0 +1,10 @@
+export const BASE_URL = process.env.NEXT_PUBLIC_URL
+export const STRING_REGEX = /^[a-zA-Zа-яА-ЯёЁ]+$/
+
+export const LOADING_TABLE_DATA = new Array(10).fill('')
+export const LOADIND_TABLE_PAGINATION = {
+	limit: 10,
+	page: 0,
+	pages: 0,
+	total: 0
+}

package/src/contexts/CreateComponentContext/CreateComponentContext.tsx

@@ -0,0 +1,17 @@
+import { createContext, Dispatch, SetStateAction } from 'react'
+
+import { IFileInfo } from '@/types'
+
+export type CreateComponentContextProps = {
+	name: string
+	setName: Dispatch<SetStateAction<string>>
+	//
+	fileInfo: IFileInfo | null
+	setFileInfo: Dispatch<SetStateAction<IFileInfo | null>>
+	//
+	componentPath: string
+	setComponentPath: Dispatch<SetStateAction<string>>
+}
+
+export const CreateComponentContext =
+	createContext<CreateComponentContextProps | null>(null)

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