bmdl-sdk 2.0.5 → 2.0.7

package/src/components/molecules/Header/Navigate/Navigate.tsx

@@ -1,40 +0,0 @@
-import clsx from 'clsx'
-import { useTranslations } from 'next-intl'
-import Link from 'next/link'
-import { TbDatabase, TbPuzzle } from 'react-icons/tb'
-
-type NavigateProps = {
-	className?: string
-}
-
-function Navigate({className}: NavigateProps) {
-	const t = useTranslations()
-
-	return (
-		<nav className={clsx(className, 'py-3')}>
-			<ul className='flex gap-x-1'>
-				<li>
-					<Link
-						href='/'
-						className='oveflow-hidden bg-primary/20 text-primary flex h-9.5 items-center justify-center rounded-md px-3 py-2 text-base font-semibold [&_svg]:mr-2 [&_svg]:size-5.5 [&_svg]:shrink-0 [&_svg]:grow-0 [&_svg]:transition-[margin-inline-end]'
-					>
-						<TbPuzzle />
-						<span>{t('categories.components')}</span>
-					</Link>
-				</li>
-				<li>
-					<Link
-						href='/datasets'
-						className='oveflow-hidden dark:text-dark-gray-300 dark:hover:bg-dark-gray-800/50 flex h-9.5 items-center justify-center rounded-md px-3 py-2 text-base font-semibold text-gray-800 hover:bg-gray-100 [&_svg]:mr-2 [&_svg]:size-5.5 [&_svg]:shrink-0 [&_svg]:grow-0 [&_svg]:transition-[margin-inline-end]'
-					>
-						<TbDatabase />
-						<span>{t('categories.datasets')}</span>
-					</Link>
-				</li>
-			</ul>
-		</nav>
-	)
-}
-
-export { Navigate }
-

package/src/components/molecules/Header/Navigate/index.ts

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

package/src/components/molecules/Header/SelectLang/SelectLang.tsx

@@ -1,47 +0,0 @@
-'use client'
-
-import Image from 'next/image'
-import enSrc from '../../../../../public/images/lang/en.png'
-
-
-import { Select } from '@/components/atoms'
-
-import { useLocale } from 'next-intl'
-import { HeaderButton } from '../Button'
-
-export function SelectLang() {
-	const language = useLocale();
-
-	const onValueChange = async (value: string) => {
-		// setCurrentLanguage(value)
-	}
-
-	return (
-		<Select
-			trigger={
-				<HeaderButton>
-					<Select.Value />
-				</HeaderButton>
-			}
-			align='end'
-			sideOffset={9}
-			value={language}
-			onValueChange={onValueChange}
-		>
-			<Select.Item value='ru'>
-				<Image
-					src={enSrc}
-					alt="Русский"
-				/>
-		 		<span>Русский</span>
-			</Select.Item>
-			<Select.Item value='en'>
-				<Image
-					src={enSrc}
-					alt="English"
-				/>
-		 		<span>English</span>
-			</Select.Item>
-		</Select>
-	)
-}

package/src/components/molecules/Header/SelectLang/index.ts

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

package/src/components/molecules/Header/SelectTheme/SelectTheme.tsx

@@ -1,43 +0,0 @@
-'use client'
-
-import { useTranslations } from 'next-intl'
-import { useTheme } from 'next-themes'
-
-import { TbMoonStars, TbSun, TbSunMoon } from 'react-icons/tb'
-
-import { Select } from '@/components/atoms'
-
-import { HeaderButton } from '../Button'
-
-export function SelectTheme() {
-	const t = useTranslations('')
-	const { setTheme, theme = 'system' } = useTheme()
-
-	const onValueChange = (value: string) => {
-		setTheme(value)
-	}
-
-	return (
-		<Select
-			trigger={
-				<HeaderButton>
-					<Select.Value />
-				</HeaderButton>
-			}
-			align='end'
-			sideOffset={9}
-			value={theme}
-			onValueChange={onValueChange}
-		>
-			<Select.Item value='light'>
-				<TbSun size={24} /> <span>{t('light')}</span>
-			</Select.Item>
-			<Select.Item value='dark'>
-				<TbMoonStars size={24} /> <span>{t('dark')}</span>
-			</Select.Item>
-			<Select.Item value='system'>
-				<TbSunMoon size={20} /> <span>{t('system')}</span>
-			</Select.Item>
-		</Select>
-	)
-}

package/src/components/molecules/Header/SelectTheme/index.ts

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

package/src/components/molecules/Header/index.ts

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

package/src/components/molecules/ProjectIcon/ProjectIcon.styles.ts

@@ -1,23 +0,0 @@
-import { VariantProps, cva } from 'class-variance-authority'
-
-import { twJoin } from '@/utils'
-
-export const rootStyles = cva(
-	twJoin({
-		display: 'flex items-center justify-center overflow-hidden',
-		visual: 'rounded-full'
-	}),
-	{
-		variants: {
-			size: {
-				sm: 'size-8 min-w-8 [&_svg]:size-5',
-				md: 'size-9.5 min-w-9.5 [&_svg]:size-6'
-			}
-		},
-		defaultVariants: {
-			size: 'md'
-		}
-	}
-)
-
-export type RootStylesProps = VariantProps<typeof rootStyles>

package/src/components/molecules/ProjectIcon/ProjectIcon.tsx

@@ -1,37 +0,0 @@
-import clsx from 'clsx'
-
-// import Image from 'next/image'
-
-import { TbPresentationAnalytics } from 'react-icons/tb'
-
-import { rootStyles, RootStylesProps } from './ProjectIcon.styles'
-
-type ProjectIconProps = RootStylesProps & {
-	icon: {
-		name: string
-		color: string
-	}
-	className?: string
-}
-
-function ProjectIcon({ icon, size, className }: ProjectIconProps) {
-	const iconStyle: any = { '--icon-color': icon.color }
-
-	return (
-		<div
-			style={iconStyle}
-			className={clsx(
-				rootStyles({ size, className }),
-				'bg-(--icon-color)/16 text-(--icon-color)'
-			)}
-		>
-			{/* {icon.path ? (
-				<Image src={icon.path} alt={icon.name} />
-			) : ( */}
-			<TbPresentationAnalytics />
-			{/* )} */}
-		</div>
-	)
-}
-
-export { ProjectIcon }

package/src/components/molecules/ProjectIcon/index.ts

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

package/src/components/molecules/Sidebar/Item/Item.styles.ts

@@ -1,52 +0,0 @@
-import { VariantProps, cva } from 'class-variance-authority'
-
-import { twJoin } from '@/utils'
-
-export const rootStyles = twJoin({
-	display: 'mt-1 first:mt-0'
-})
-
-// /////////////////////////
-
-export const linkStyles = cva(
-	twJoin({
-		display: 'flex items-center h-9.5 px-3 py-2 oveflow-hidden',
-		text: 'text-base text-gray-800',
-		visual: 'rounded-md outline-none',
-		animation: 'transition-(color,bg) duration-300',
-		hover: 'hover:bg-gray-100',
-		attrs: [
-			'group-data-[state="collapsed"]:[&_svg]:mr-0',
-			'group-data-[state="collapsed"]:[&_span]:hidden',
-			'group-data-[state="collapsed"]:[&_span]:opacity-0',
-			//
-			'group-data-[state="collapsed"]:justify-center'
-		],
-		childs: [
-			'[&_svg]:size-5.5',
-			'[&_svg]:mr-2',
-			'[&_svg]:transition-[margin-inline-end]',
-			'[&_svg]:grow-0',
-			'[&_svg]:shrink-0'
-		],
-		//
-		dark: {
-			text: 'dark:text-dark-gray-200',
-			hover: {
-				visual: 'dark:hover:bg-dark-gray-800/50'
-			}
-		}
-	}),
-	{
-		variants: {
-			active: {
-				true: 'bg-linear-(--gradient-primary) shadow-primary-sm text-white'
-			}
-		},
-		defaultVariants: {
-			active: false
-		}
-	}
-)
-
-export type LinkStylesProps = VariantProps<typeof linkStyles>

package/src/components/molecules/Sidebar/Item/Item.tsx

@@ -1,30 +0,0 @@
-import Link, { type LinkProps } from 'next/link'
-import { type ComponentProps } from 'react'
-
-import { Tooltip } from '@/components/atoms'
-
-import { type LinkStylesProps, linkStyles, rootStyles } from './Item.styles'
-
-import { useSidebar } from '@/hooks/useSidebar'
-
-type ItemProps = ComponentProps<'a'> &
-	LinkProps &
-	LinkStylesProps & {
-		tooltip: string
-	}
-
-function Item({ active, tooltip, children, ...props }: ItemProps) {
-	const { isMobile, isOpen } = useSidebar()
-
-	return (
-		<li className={rootStyles}>
-			<Tooltip title={tooltip} side='right' hidden={isOpen || isMobile}>
-				<Link className={linkStyles({ active })} {...props}>
-					{children}
-				</Link>
-			</Tooltip>
-		</li>
-	)
-}
-
-export { Item }

package/src/components/molecules/Sidebar/Item/index.ts

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

package/src/components/molecules/Sidebar/Sidebar.styles.ts

@@ -1,97 +0,0 @@
-import { cva } from 'class-variance-authority'
-
-import { twJoin } from '@/utils'
-
-export const rootStyles = cva(
-	twJoin({
-		display: 'w-18 overflow-hidden',
-		animation: 'ease-linear duration-200',
-		attrs: 'group-data-[state=expanded]:w-60'
-	}),
-	{
-		variants: {
-			content: {
-				true: twJoin({
-					position: 'fixed inset-y-0 left-0 z-50',
-					display: 'h-svh',
-					visual: 'bg-white shadow-sm',
-					animation: 'transition-[left,width]',
-					//
-					dark: 'dark:shadow-dark-sm dark:bg-dark-gray-900'
-				}),
-				false: 'relative transition-[width]'
-			}
-		},
-		defaultVariants: {
-			content: false
-		}
-	}
-)
-
-// /////////////////////////
-
-export const wrapperStyles = twJoin({
-	display: 'flex h-full w-full flex-col'
-})
-
-export const headerStyles = twJoin({
-	display: 'flex items-center pt-5 pb-1 px-3.5',
-	text: 'text-2xl text-gray-900',
-	childs: {
-		display: [
-			'[&_button]:flex [&_button]:items-center [&_button]:px-3 [&_button]:py-1 [&_button]:ml-auto'
-		],
-		hover: {
-			mouse: 'hover:[&_button]:cursor-pointer'
-		},
-		attrs: [
-			'group-data-[state="expanded"]:pl-4.5',
-			'group-data-[state="expanded"]:pr-0',
-			//
-			'group-data-[state="collapsed"]:pb-2',
-			'group-data-[state="collapsed"]:[&_>_a]:hidden',
-			'group-data-[state="collapsed"]:[&_>_button]:ml-0',
-			'group-data-[state="collapsed"]:justify-center'
-		]
-	},
-	//
-	dark: {
-		text: 'dark:text-dark-gray-300'
-	}
-})
-
-// /////////////////////////
-
-export const contentStyles = twJoin({
-	display: 'px-3'
-})
-
-// /////////////////////////
-
-export const groupHeadStyles = twJoin({
-	display: 'flex items-center h-11.5 p-3',
-	childs: {
-		display: '[&_svg]:size-5.5',
-		text: 'text-gray uppercase',
-		attrs: [
-			'group-data-[state="collapsed"]:[&_[role="separator"]]:hidden',
-			'group-data-[state="collapsed"]:[&_span]:hidden',
-			'group-data-[state="collapsed"]:justify-center',
-			//
-			'group-data-[state="expanded"]:[&_svg]:hidden'
-		]
-	},
-	//
-	dark: 'dark:text-dark-gray-600'
-})
-
-// /////////////////////////
-
-export const footerStyles = twJoin({
-	display: 'flex items-center justify-center py-2 px-3.5 mt-auto',
-	text: 'text-center text-nowrap',
-	visual: 'border-t border-divider',
-	childs: 'group-data-[state="collapsed"]:[&_span_span]:hidden',
-	//
-	dark: 'dark:border-dark-divider'
-})

package/src/components/molecules/Sidebar/Sidebar.tsx

@@ -1,122 +0,0 @@
-'use client'
-
-import { useTranslations } from 'next-intl'
-import { usePathname } from 'next/navigation'
-import { Fragment } from 'react'
-
-import { TbSeparator } from 'react-icons/tb'
-
-import { Logo, Separator, Sheet, Typography } from '@/components/atoms'
-
-import {
-	contentStyles,
-	footerStyles,
-	groupHeadStyles,
-	headerStyles,
-	rootStyles,
-	wrapperStyles
-} from './Sidebar.styles'
-
-import { Item } from './Item'
-import { getSidebarGroups } from './Sidebar.utils'
-import { Trigger } from './Trigger'
-import { useSidebar } from '@/hooks'
-
-const { Text } = Typography
-
-function SidebarRoot({
-	className,
-	children,
-	...props
-}: React.ComponentProps<'div'>) {
-	const { isMobile, isOpen, setIsOpen } = useSidebar()
-
-	if (isMobile) {
-		return (
-			<Sheet
-				open={isOpen}
-				onOpenChange={setIsOpen}
-				className='w-60 p-0'
-				{...props}
-			>
-				<div className={wrapperStyles}>{children}</div>
-			</Sheet>
-		)
-	}
-
-	return (
-		<div
-			className='group peer'
-			data-state={isOpen ? 'expanded' : 'collapsed'}
-		>
-			<div className={rootStyles()} />
-			<div className={rootStyles({ content: true })} {...props}>
-				<div className={wrapperStyles}>{children}</div>
-			</div>
-		</div>
-	)
-}
-
-function Sidebar() {
-	const t = useTranslations('')
-	//
-	const pathname = usePathname()
-	//
-	const groups = getSidebarGroups()
-
-	return (
-		<SidebarRoot>
-			<div className={headerStyles}>
-				<Logo />
-				<Trigger />
-			</div>
-			<div className={contentStyles}>
-				{groups.map(group => {
-					return (
-						<Fragment key={group.key}>
-							<div className={groupHeadStyles}>
-								<TbSeparator />
-								{group.title ? (
-									<Text size={'xs'} muted>
-										{group.title}
-									</Text>
-								) : (
-									<Separator className='w-full' />
-								)}
-							</div>
-							<ul>
-								{group.items.map(item => {
-									const isActive =
-										pathname.startsWith(item.url) ||
-										pathname === item.url
-
-									return (
-										<Item
-											key={item.title}
-											href={item.url}
-											tooltip={item.title}
-											active={isActive}
-										>
-											<item.icon />
-											<span>{item.title}</span>
-										</Item>
-									)
-								})}
-							</ul>
-						</Fragment>
-					)
-				})}
-			</div>
-			<div className={footerStyles}>
-				<Text size={'xs'}>
-					<span>{t('version')}</span>{' '}
-					{process.env.NEXT_PUBLIC_APP_VERSION}
-				</Text>
-			</div>
-		</SidebarRoot>
-	)
-}
-
-Sidebar.Trigger = Trigger
-
-export { Sidebar }

package/src/components/molecules/Sidebar/Sidebar.utils.tsx

@@ -1,36 +0,0 @@
-import { useTranslations } from 'next-intl'
-
-import {
-	TbChartHistogram,
-	TbDatabase,
-	TbPalette
-} from 'react-icons/tb'
-
-export const getSidebarGroups = () => {
-	const tg = useTranslations('')
-	const t = useTranslations('categories')
-
-	return [
-		{
-			key: 'general',
-			title: '',
-			items: [
-				{
-					title: t('datasets'),
-					url: '/datasets',
-					icon: TbDatabase
-				},
-				{
-					title: t('widgets'),
-					url: '/widgets',
-					icon: TbChartHistogram
-				},
-				{
-					title: t('themes'),
-					url: '/themes',
-					icon: TbPalette
-				}
-			]
-		}
-	]
-}

package/src/components/molecules/Sidebar/Trigger/Trigger.tsx

@@ -1,23 +0,0 @@
-import { type ComponentProps } from 'react'
-
-import { TbBaselineDensityMedium } from 'react-icons/tb'
-
-import { SidebarCloseIcon } from '@/components/atoms/icons'
-
-import { Button } from '@/components/atoms'
-
-import { useSidebar } from '@/hooks/useSidebar'
-
-type TriggerProps = ComponentProps<typeof Button>
-
-function Trigger({ className, onClick, ...props }: TriggerProps) {
-	const { isOpen, toggleSidebar } = useSidebar()
-
-	return (
-		<button data-type='sidebar-trigger' onClick={toggleSidebar} {...props}>
-			{isOpen ? <SidebarCloseIcon /> : <TbBaselineDensityMedium />}
-		</button>
-	)
-}
-
-export { Trigger }

package/src/components/molecules/Sidebar/Trigger/index.ts

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

package/src/components/molecules/Sidebar/index.ts

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

package/src/components/molecules/Widget/Content/Content.tsx

@@ -1,80 +0,0 @@
-'use client'
-
-import { useTranslations } from 'next-intl'
-import React, { Suspense, useEffect, useState } from 'react'
-
-import { TbInfoHexagon, TbPuzzle, TbPuzzleOff } from 'react-icons/tb'
-
-import { WidgetEmpty } from '../Widget.utils'
-
-import { _ } from '@/utils'
-
-interface ContentProps {
-	componentId?: number
-	dataOptions: any
-	viewOptions: any
-}
-
-export function Content({
-	componentId,
-	dataOptions,
-	viewOptions
-}: ContentProps) {
-	const t = useTranslations('components')
-	//
-	const [WidgetComponent, setWidgetComponent] =
-		useState<React.ComponentType<any>>()
-	//
-	useEffect(() => {
-		const loadWidget = async () => {
-			try {
-				const component = await import(
-					/* webpackIgnore: true */
-					`${process.env.NEXT_PUBLIC_SERVER_URL}/components/${componentId}/index.js`
-				)
-				setWidgetComponent(() => component.default(React))
-			} catch (error) {
-				return (
-					<WidgetEmpty
-						icon={<TbInfoHexagon className='text-danger!' />}
-						text={'error'}
-					/>
-				)
-			}
-		}
-
-		loadWidget()
-	}, [componentId])
-	//
-	useEffect(() => {
-		console.log('dataOptions', dataOptions)
-		console.log('viewOptions', viewOptions)
-	}, [dataOptions, viewOptions])
-	//
-	if (_.isUndefined(componentId)) {
-		return <WidgetEmpty icon={<TbPuzzleOff />} text={t('empty')} />
-	}
-	//
-	//////////
-	//
-	const WidgetFallback = (
-		<WidgetEmpty
-			icon={<TbPuzzle />}
-			text={t('loading')}
-			className='animate-bounce'
-		/>
-	)
-	//
-	if (_.isUndefined(WidgetComponent)) {
-		return WidgetFallback
-	}
-	//
-	return (
-		<Suspense fallback={WidgetFallback}>
-			<WidgetComponent
-				dataSettings={dataOptions}
-				viewSettings={viewOptions}
-			/>
-		</Suspense>
-	)
-}

package/src/components/molecules/Widget/Content/index.ts

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