bmdl-sdk 1.5.8 → 2.0.0

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

@@ -0,0 +1,26 @@
+import { WidgetModel } from '@/graphql'
+
+import { Content } from './Content'
+
+interface WidgetProps {
+	data: WidgetModel & { i: string }
+	className?: string
+}
+
+export function Widget({ data, className }: WidgetProps) {
+	const { name, description, componentId, viewOptions, dataOptions } = data
+
+	return (
+		<div className={className}>
+			<h3>{name}</h3>
+			{description && <p>{description}</p>}
+			{componentId && (
+				<Content
+					componentId={componentId}
+					viewOptions={viewOptions}
+					dataOptions={dataOptions}
+				/>
+			)}
+		</div>
+	)
+}

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

@@ -0,0 +1,31 @@
+import clsx from 'clsx'
+import { ReactNode } from 'react'
+
+import { Button, Typography } from '@/components/atoms'
+
+const { Text } = Typography
+
+interface WidgetEmptyProps {
+	icon: ReactNode
+	text: string
+	className?: string
+}
+
+export const WidgetEmpty = ({ icon, text, className }: WidgetEmptyProps) => {
+	return (
+		<div className='bg-secondary/8 flex size-full flex-col items-center justify-center gap-y-2'>
+			<Button
+				asChild
+				size='icon'
+				variant='label'
+				color='secondary'
+				className={clsx('pointer-events-none', className)}
+			>
+				<span>{icon}</span>
+			</Button>
+			<Text strong accent>
+				{text}
+			</Text>
+		</div>
+	)
+}

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

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

package/src/components/molecules/index.ts

@@ -0,0 +1,6 @@
+export { DataTable } from './DataTable'
+export { Header } from './Header'
+export { ProjectIcon } from './ProjectIcon'
+export { Sidebar } from './Sidebar'
+export { Widget } from './Widget'
+

package/src/components/organisms/ComponentWidget/ComponentWidget.tsx

@@ -0,0 +1,107 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { ComponentProps } from '../../../../index'
+
+// Интерфейс для динамического импорта виджета
+interface WidgetModule {
+  default: React.ComponentType<ComponentProps>
+}
+
+export function ComponentWidget() {
+  const [WidgetComponent, setWidgetComponent] =
+    useState<React.ComponentType<ComponentProps> | null>(null)
+  const [dataOptions, setDataOptions] = useState<any>(null)
+  const [viewOptions, setViewOptions] = useState<any>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    // Загружаем компонент виджета из проекта
+    const loadWidget = async () => {
+      try {
+        // Динамически импортируем компонент из проекта разработчика
+        const widgetModule =
+          (await import('@project/app/App.tsx')) as WidgetModule
+        const dataOptionsModule = await import('@project/dataOptions.ts')
+        const viewOptionsModule = await import('@project/viewOptions.ts')
+
+        setWidgetComponent(() => widgetModule.default)
+        // @ts-ignore
+        setDataOptions(dataOptionsModule.createDataOptions())
+        // @ts-ignore
+        setViewOptions(viewOptionsModule.createViewOptions())
+        setLoading(false)
+      } catch (err) {
+        console.error('Failed to load widget:', err)
+        setError('Failed to load widget component. Please check your files.')
+        setLoading(false)
+      }
+    }
+
+    loadWidget()
+  }, [])
+
+  if (loading) {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100vh',
+        }}
+      >
+        <h2>Loading widget...</h2>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100%',
+          flexDirection: 'column',
+        }}
+      >
+        <h2 style={{ color: 'red' }}>Error</h2>
+        <p>{error}</p>
+        <p style={{ fontSize: '14px', color: '#666' }}>
+          Make sure you have src/App/App.tsx, src/config.ts, src/dataOptions.ts,
+          src/viewOptions.ts
+        </p>
+      </div>
+    )
+  }
+
+  if (!WidgetComponent) {
+    return null
+  }
+
+  return (
+    <div
+      style={{
+        flex: 1,
+        padding: '20px',
+        backgroundColor: '#ffffff',
+        overflow: 'auto',
+      }}
+    >
+      <h3 style={{ marginTop: 0 }}>📱 Your Widget</h3>
+      <div
+        style={{
+          border: '2px dashed #ccc',
+          borderRadius: '8px',
+          padding: '20px',
+          minHeight: '100%',
+        }}
+      >
+        <WidgetComponent dataOptions={dataOptions} viewOptions={viewOptions} />
+      </div>
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,105 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { useState } from 'react'
+
+import {
+	TbColumns3,
+	TbFileAnalytics,
+	TbInfoOctagon,
+	TbIrregularPolyhedron
+} from 'react-icons/tb'
+
+import { Tabs, Typography } from '@/components/atoms'
+
+import { CreateDatasetProvider } from '@/providers'
+
+import { Navigate } from './Navigate'
+import { Step } from './Step'
+import { Step1, Step2, Step3, Step4 } from './Steps'
+
+const { Title, Paragraph } = Typography
+
+type DatasetCreationProps = {}
+
+function DatasetCreation({}: DatasetCreationProps) {
+	const t = useTranslations('datasets.creation')
+	//
+	const [activeTab, setActiveTab] = useState('step1')
+	//
+	const prevTabHandler = () => {
+		const currentTab = activeTab[activeTab.length - 1]
+		setActiveTab('step' + (+currentTab - 1))
+	}
+	//
+	const nextTabHandler = () => {
+		const currentTab = activeTab[activeTab.length - 1]
+		setActiveTab('step' + (+currentTab + 1))
+	}
+
+	return (
+		<div className='p-10'>
+			<div className='mb-3 text-center'>
+				<Title level={3} className='mb-3'>
+					{t('title')}
+				</Title>
+				<Paragraph className='mb-6'>{t('info')}</Paragraph>
+			</div>
+
+			<Tabs value={activeTab} onValueChange={setActiveTab}>
+				<div className='flex gap-x-15'>
+					<div className='flex flex-col gap-y-6'>
+						<Step
+							num={'one'}
+							icon={<TbIrregularPolyhedron />}
+							isActive={activeTab === 'step1'}
+						/>
+						<Step
+							num={'two'}
+							icon={<TbFileAnalytics />}
+							isActive={activeTab === 'step2'}
+						/>
+						<Step
+							num={'three'}
+							icon={<TbColumns3 />}
+							isActive={activeTab === 'step3'}
+						/>
+						<Step
+							num={'four'}
+							icon={<TbInfoOctagon />}
+							isActive={activeTab === 'step4'}
+						/>
+					</div>
+					<div className='flex w-md flex-col'>
+						<CreateDatasetProvider>
+							<div>
+								<Tabs.Content value='step1'>
+									<Step1 />
+								</Tabs.Content>
+								{/*  */}
+								<Tabs.Content value='step2'>
+									<Step2 />
+								</Tabs.Content>
+								{/*  */}
+								<Tabs.Content value='step3'>
+									<Step3 />
+								</Tabs.Content>
+								{/*  */}
+								<Tabs.Content value='step4'>
+									<Step4 prevTabHandler={prevTabHandler} />
+								</Tabs.Content>
+							</div>
+							<Navigate
+								activeTab={activeTab}
+								prevTabHandler={prevTabHandler}
+								nextTabHandler={nextTabHandler}
+							/>
+						</CreateDatasetProvider>
+					</div>
+				</div>
+			</Tabs>
+		</div>
+	)
+}
+
+export { DatasetCreation }

package/src/components/organisms/DatasetsTable/Creation/Navigate/Navigate.tsx

@@ -0,0 +1,59 @@
+import { useTranslations } from 'next-intl'
+
+import { TbChevronLeft, TbChevronRight } from 'react-icons/tb'
+
+import { Button } from '@/components/atoms'
+
+import { useCreateDataset } from '@/hooks'
+
+type NavigateProps = {
+	activeTab: string
+	prevTabHandler: any
+	nextTabHandler: any
+}
+
+function Navigate({
+	activeTab,
+	prevTabHandler,
+	nextTabHandler
+}: NavigateProps) {
+	const t = useTranslations('')
+	//
+	const { sourceType, fileInfo, columns } = useCreateDataset()
+	//
+	const hasDisabled = () => {
+		switch (activeTab) {
+			case 'step2': {
+				return sourceType === 'file' && !fileInfo
+			}
+			case 'step3': {
+				return !columns.length
+			}
+			default: {
+				return false
+			}
+		}
+	}
+
+	return (
+		<div
+			className='mt-auto flex justify-between'
+			hidden={activeTab === 'step4'}
+		>
+			<Button
+				color='secondary'
+				variant='label'
+				onClick={prevTabHandler}
+				disabled={activeTab === 'step1'}
+			>
+				<TbChevronLeft />
+				{t('back')}
+			</Button>
+			<Button onClick={nextTabHandler} disabled={hasDisabled()}>
+				{t('further')} <TbChevronRight />
+			</Button>
+		</div>
+	)
+}
+
+export { Navigate }

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

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

package/src/components/organisms/DatasetsTable/Creation/Step/Step.styles.ts

@@ -0,0 +1,12 @@
+import { twJoin } from '@/utils'
+
+export const stepStyles = twJoin({
+	display: 'flex items-center gap-x-4'
+})
+
+// /////////////////////////
+
+export const stepLabelStyles = twJoin({
+	display: 'flex flex-col items-start',
+	text: 'whitespace-nowrap'
+})

package/src/components/organisms/DatasetsTable/Creation/Step/Step.tsx

@@ -0,0 +1,43 @@
+import { useTranslations } from 'next-intl'
+import { ReactNode } from 'react'
+
+import { Button, Typography } from '@/components/atoms'
+
+import { stepLabelStyles, stepStyles } from './Step.styles'
+
+const { Text } = Typography
+
+type StepProps = {
+	num: string
+	icon: ReactNode
+	isActive: boolean
+}
+
+function Step({ num, icon, isActive }: StepProps) {
+	const t = useTranslations('datasets.creation')
+
+	return (
+		<div className={stepStyles}>
+			<Button
+				asChild
+				className='pointer-events-none'
+				size='icon'
+				variant={isActive ? 'default' : 'label'}
+				color={isActive ? 'primary' : 'secondary'}
+			>
+				<span>{icon}</span>
+			</Button>
+
+			<div className={stepLabelStyles}>
+				<Text accent strong className='uppercase'>
+					{t(`steps.${num}.btn.name`)}
+				</Text>
+				<Text strong muted>
+					{t(`steps.${num}.btn.desc`)}
+				</Text>
+			</div>
+		</div>
+	)
+}
+
+export { Step }

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

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

package/src/components/organisms/DatasetsTable/Creation/Steps/Step1/Step1.styles.ts

@@ -0,0 +1,41 @@
+import { cva } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const labelStyles = twJoin({
+	display: 'flex items-center justify-between'
+})
+
+// /////////////////////////
+
+export const labelBodyStyles = twJoin({
+	display: 'flex w-full items-center gap-x-4'
+})
+
+// /////////////////////////
+
+export const labelIconStyles = cva(
+	twJoin({
+		display: 'flex size-12 items-center justify-center',
+		visual: 'rounded-lg',
+		childs: '[&_svg]:size-7'
+	}),
+	{
+		variants: {
+			type: {
+				source: 'bg-green/15 text-green',
+				file: 'bg-info/15 text-info'
+			}
+		},
+		defaultVariants: {
+			type: 'source'
+		}
+	}
+)
+
+// /////////////////////////
+
+export const labelTextStyles = twJoin({
+	display: 'flex flex-col',
+	text: 'whitespace-nowrap'
+})

package/src/components/organisms/DatasetsTable/Creation/Steps/Step1/Step1.tsx

@@ -0,0 +1,67 @@
+import { useTranslations } from 'next-intl'
+
+import { TbFileInvoice, TbSitemap } from 'react-icons/tb'
+
+import { Label, Radio, Typography } from '@/components/atoms'
+
+import {
+	labelBodyStyles,
+	labelIconStyles,
+	labelStyles,
+	labelTextStyles
+} from './Step1.styles'
+
+import { useCreateDataset } from '@/hooks'
+
+const { Title, Text } = Typography
+
+function Step1() {
+	const t = useTranslations('datasets.creation.steps.one')
+	//
+	const { sourceType, setSourceType } = useCreateDataset()
+	//
+	return (
+		<div className='flex flex-col gap-y-4'>
+			<Title level={5}>{t('title')}</Title>
+			<Radio
+				value={sourceType}
+				className='flex flex-col gap-y-4'
+				onValueChange={setSourceType}
+			>
+				<Label htmlFor='type-sourse' className={labelStyles}>
+					<div className={labelBodyStyles}>
+						<div className={labelIconStyles()}>
+							<TbSitemap />
+						</div>
+						<div className={labelTextStyles}>
+							<Text accent>{t('source.name')}</Text>
+							<Text muted size={'sm'}>
+								{t('source.desc')}
+							</Text>
+						</div>
+					</div>
+
+					<Radio.Item value='source' id='type-sourse' />
+				</Label>
+
+				<Label htmlFor='type-file' className={labelStyles}>
+					<div className={labelBodyStyles}>
+						<div className={labelIconStyles({ type: 'file' })}>
+							<TbFileInvoice />
+						</div>
+						<div className={labelTextStyles}>
+							<Text accent>{t('file.name')}</Text>
+							<Text muted size={'sm'}>
+								{t('file.desc')}
+							</Text>
+						</div>
+					</div>
+
+					<Radio.Item value='file' id='type-file' />
+				</Label>
+			</Radio>
+		</div>
+	)
+}
+
+export { Step1 }

package/src/components/organisms/DatasetsTable/Creation/Steps/Step1/index.ts

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