bmdl-sdk 1.5.9 → 2.0.0

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

@@ -0,0 +1,40 @@
+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

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

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

@@ -0,0 +1,47 @@
+'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

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

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

@@ -0,0 +1,43 @@
+'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

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

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

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

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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,37 @@
+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

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

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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,30 @@
+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

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

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

@@ -0,0 +1,97 @@
+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

@@ -0,0 +1,122 @@
+'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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,23 @@
+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

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

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

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

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

@@ -0,0 +1,80 @@
+'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

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