bmdl-sdk 1.5.9 → 2.0.1

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,9 @@
+import dynamic from 'next/dynamic'
+
+export const ComponentWidget = dynamic(
+  () => import(`${process.env.PROJECT_ROOT}/src/app/App.tsx`),
+  { 
+    ssr: false,
+    loading: () => <div>Loading...</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'

package/src/components/organisms/DatasetsTable/Creation/Steps/Step2/SelectSource/SelectSource.tsx

@@ -0,0 +1,252 @@
+import { useTranslations } from 'next-intl'
+
+import { TbApi, TbDatabase } from 'react-icons/tb'
+
+import { Input, Label, Radio, Typography } from '@/components/atoms'
+
+const { Title, Text } = Typography
+
+function SelectSource() {
+	const tg = useTranslations()
+	const t = useTranslations('datasets.creation.steps.two.source')
+	//
+	return (
+		<div className='flex flex-col gap-y-4'>
+			<Input.Search placeholder={tg('search')} />
+			<Title level={5}>{t('title')}</Title>
+			<div className='-mr-6 mb-4 max-h-95 overflow-y-auto pr-4'>
+				<Radio className='flex flex-col gap-y-3'>
+					<Label
+						htmlFor='sourse-1'
+						className='flex items-center justify-between'
+					>
+						<div className='flex w-full items-center gap-x-4'>
+							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
+								<TbDatabase />
+							</div>
+							<div className='flex flex-col whitespace-nowrap'>
+								<Text accent>1C_ЗУП</Text>
+								<Text muted size={'sm'}>
+									Postgres
+								</Text>
+							</div>
+						</div>
+
+						<Radio.Item value='sourse-1' id='sourse-1' />
+					</Label>
+
+					<Label
+						htmlFor='sourse-2'
+						className='flex items-center justify-between'
+					>
+						<div className='flex w-full items-center gap-x-4'>
+							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
+								<TbApi />
+							</div>
+							<div className='flex flex-col whitespace-nowrap'>
+								<Text accent>srv-obvp-243.bft.local:8080</Text>
+								<Text muted size={'sm'}>
+									ПА
+								</Text>
+							</div>
+						</div>
+
+						<Radio.Item value='sourse-2' id='sourse-2' />
+					</Label>
+
+					<Label
+						htmlFor='sourse-3'
+						className='flex items-center justify-between'
+					>
+						<div className='flex w-full items-center gap-x-4'>
+							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
+								<TbApi />
+							</div>
+							<div className='flex flex-col whitespace-nowrap'>
+								<Text accent>Тестовый стенд полиматики</Text>
+								<Text muted size={'sm'}>
+									ПА
+								</Text>
+							</div>
+						</div>
+
+						<Radio.Item value='sourse-3' id='sourse-3' />
+					</Label>
+
+					<Label
+						htmlFor='sourse-4'
+						className='flex items-center justify-between'
+					>
+						<div className='flex w-full items-center gap-x-4'>
+							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
+								<TbDatabase />
+							</div>
+							<div className='flex flex-col whitespace-nowrap'>
+								<Text accent>БД. НО</Text>
+								<Text muted size={'sm'}>
+									ClickHouse
+								</Text>
+							</div>
+						</div>
+
+						<Radio.Item value='sourse-4' id='sourse-4' />
+					</Label>
+
+					<Label
+						htmlFor='sourse-5'
+						className='flex items-center justify-between'
+					>
+						<div className='flex w-full items-center gap-x-4'>
+							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
+								<TbDatabase />
+							</div>
+							<div className='flex flex-col whitespace-nowrap'>
+								<Text accent>БД. УО</Text>
+								<Text muted size={'sm'}>
+									Postgres
+								</Text>
+							</div>
+						</div>
+
+						<Radio.Item value='sourse-5' id='sourse-5' />
+					</Label>
+
+					<Label
+						htmlFor='sourse-6'
+						className='flex items-center justify-between'
+					>
+						<div className='flex w-full items-center gap-x-4'>
+							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
+								<TbApi />
+							</div>
+							<div className='flex flex-col whitespace-nowrap'>
+								<Text accent>Источник ПА</Text>
+								<Text muted size={'sm'}>
+									ПА
+								</Text>
+							</div>
+						</div>
+
+						<Radio.Item value='sourse-6' id='sourse-6' />
+					</Label>
+
+					<Label
+						htmlFor='sourse-7'
+						className='flex items-center justify-between'
+					>
+						<div className='flex w-full items-center gap-x-4'>
+							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
+								<TbDatabase />
+							</div>
+							<div className='flex flex-col whitespace-nowrap'>
+								<Text accent>1C_ЗУП</Text>
+								<Text muted size={'sm'}>
+									Postgres
+								</Text>
+							</div>
+						</div>
+
+						<Radio.Item value='sourse-7' id='sourse-7' />
+					</Label>
+
+					<Label
+						htmlFor='sourse-8'
+						className='flex items-center justify-between'
+					>
+						<div className='flex w-full items-center gap-x-4'>
+							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
+								<TbApi />
+							</div>
+							<div className='flex flex-col whitespace-nowrap'>
+								<Text accent>srv-obvp-243.bft.local:8080</Text>
+								<Text muted size={'sm'}>
+									ПА
+								</Text>
+							</div>
+						</div>
+
+						<Radio.Item value='sourse-8' id='sourse-8' />
+					</Label>
+
+					<Label
+						htmlFor='sourse-9'
+						className='flex items-center justify-between'
+					>
+						<div className='flex w-full items-center gap-x-4'>
+							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
+								<TbApi />
+							</div>
+							<div className='flex flex-col whitespace-nowrap'>
+								<Text accent>Тестовый стенд полиматики</Text>
+								<Text muted size={'sm'}>
+									ПА
+								</Text>
+							</div>
+						</div>
+
+						<Radio.Item value='sourse-9' id='sourse-9' />
+					</Label>
+
+					<Label
+						htmlFor='sourse-10'
+						className='flex items-center justify-between'
+					>
+						<div className='flex w-full items-center gap-x-4'>
+							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
+								<TbDatabase />
+							</div>
+							<div className='flex flex-col whitespace-nowrap'>
+								<Text accent>БД. НО</Text>
+								<Text muted size={'sm'}>
+									ClickHouse
+								</Text>
+							</div>
+						</div>
+
+						<Radio.Item value='sourse-10' id='sourse-10' />
+					</Label>
+
+					<Label
+						htmlFor='sourse-11'
+						className='flex items-center justify-between'
+					>
+						<div className='flex w-full items-center gap-x-4'>
+							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
+								<TbDatabase />
+							</div>
+							<div className='flex flex-col whitespace-nowrap'>
+								<Text accent>БД. УО</Text>
+								<Text muted size={'sm'}>
+									Postgres
+								</Text>
+							</div>
+						</div>
+
+						<Radio.Item value='sourse-11' id='sourse-11' />
+					</Label>
+
+					<Label
+						htmlFor='sourse-12'
+						className='flex items-center justify-between'
+					>
+						<div className='flex w-full items-center gap-x-4'>
+							<div className='bg-gray/15 text-gray flex size-9.5 items-center justify-center rounded-lg [&_svg]:size-6'>
+								<TbApi />
+							</div>
+							<div className='flex flex-col whitespace-nowrap'>
+								<Text accent>Источник ПА</Text>
+								<Text muted size={'sm'}>
+									ПА
+								</Text>
+							</div>
+						</div>
+
+						<Radio.Item value='sourse-12' id='sourse-12' />
+					</Label>
+				</Radio>
+			</div>
+		</div>
+	)
+}
+
+export { SelectSource }

package/src/components/organisms/DatasetsTable/Creation/Steps/Step2/SelectSource/index.ts

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