@gravity-ui/querieskit 1.2.0 → 1.3.1

package/src/types/navigation.ts

@@ -1,199 +0,0 @@
-import {ReactNode} from 'react';
-import type {LoadPathSuggestions} from './pathEditor';
-
-export type NavigationLocation = {
-    cluster: string | undefined;
-    path: string | undefined;
-};
-
-export type NavigationAction<TArg> = {
-    id: string;
-    title: string;
-    content: ReactNode;
-    hidden?: boolean;
-    disabled?: boolean;
-    qa?: string;
-    onClick: (arg: TArg) => void;
-};
-
-export type NavigationHeaderAction = NavigationAction<NavigationLocation>;
-
-export type NavigationCluster = {
-    id: string;
-    title: string;
-    icon?: ReactNode;
-    color?: string;
-    backgroundColor?: string;
-    description?: string;
-};
-
-export type NavigationItemKind = 'folder' | 'file' | 'table' | 'link' | 'unknown';
-
-export type NavigationItem = {
-    path: string;
-    title: string;
-    icon?: ReactNode;
-    kind?: NavigationItemKind;
-    targetPathBroken?: boolean;
-    hasChildren?: boolean;
-    disabled?: boolean;
-};
-
-export type NavigationSortOrder = 'asc' | 'desc';
-
-export type NavigationItemRowRenderData<T extends NavigationItem = NavigationItem> = {
-    item: T;
-    index: number;
-    isActive: boolean;
-    isParentRow: boolean;
-};
-
-export type NavigationClusterRowRenderData<T extends NavigationCluster = NavigationCluster> = {
-    cluster: T;
-    index: number;
-    isActive: boolean;
-};
-
-export type RenderNavigationItem<T extends NavigationItem = NavigationItem> = (
-    data: NavigationItemRowRenderData<T>,
-) => ReactNode;
-
-export type RenderNavigationCluster<T extends NavigationCluster = NavigationCluster> = (
-    data: NavigationClusterRowRenderData<T>,
-) => ReactNode;
-
-export type NavigationDetailTabRenderContext = {
-    search: string;
-    onSearchUpdate?: (value: string) => void;
-    searchPlaceholder?: string;
-};
-
-export type NavigationDetailTab = {
-    id: string;
-    title: string;
-    content?: ReactNode;
-    renderContent?: (ctx: NavigationDetailTabRenderContext) => ReactNode;
-    hidden?: boolean;
-    disabled?: boolean;
-};
-
-export type NavigationAsyncConfig = {
-    loading?: boolean;
-    loaded?: boolean;
-    errorContent?: ReactNode;
-};
-
-export type NavigationSchemaSortOrder = 'ascending' | 'descending';
-
-export type NavigationSchemaColumn = {
-    name: string;
-    type?: string;
-    sortOrder?: NavigationSchemaSortOrder;
-    required?: boolean;
-    [key: string]: unknown;
-};
-
-export type NavigationSchemaConfig<
-    TColumn extends NavigationSchemaColumn = NavigationSchemaColumn,
-> = NavigationAsyncConfig & {
-    columns: TColumn[];
-};
-
-export type NavigationCellValue = ReactNode;
-
-export type NavigationPreviewRow = Record<string, NavigationCellValue>;
-
-export type NavigationPreviewConfig<TRow extends NavigationPreviewRow = NavigationPreviewRow> =
-    NavigationAsyncConfig & {
-        columns: string[];
-        rows: TRow[];
-    };
-
-export type NavigationViewRow = NavigationPreviewRow;
-
-export type NavigationViewSectionAction<TRow extends NavigationViewRow = NavigationViewRow> =
-    NavigationAction<NavigationViewSection<TRow>>;
-
-export type NavigationViewSection<TRow extends NavigationViewRow = NavigationViewRow> =
-    NavigationAsyncConfig & {
-        id: string;
-        title: ReactNode;
-        columns: string[];
-        rows: TRow[];
-        expanded?: boolean;
-        defaultExpanded?: boolean;
-        onExpandedChange?: (expanded: boolean) => void;
-        actions?: Array<NavigationViewSectionAction<TRow>>;
-    };
-
-export type NavigationViewConfig<TRow extends NavigationViewRow = NavigationViewRow> =
-    NavigationAsyncConfig & {
-        sections: Array<NavigationViewSection<TRow>>;
-    };
-
-export type NavigationMetaItem = {
-    name: string;
-    value: NavigationCellValue;
-    [key: string]: unknown;
-};
-
-export type NavigationMetaGroup<TItem extends NavigationMetaItem = NavigationMetaItem> = {
-    title?: string;
-    items: TItem[];
-};
-
-export type NavigationMetaConfig<TItem extends NavigationMetaItem = NavigationMetaItem> =
-    NavigationAsyncConfig & {
-        groups: Array<NavigationMetaGroup<TItem>>;
-    };
-
-export type NavigationDetailConfig = {
-    tabs: NavigationDetailTab[];
-    defaultTab?: string;
-    hasSearch?: boolean;
-    searchPlaceholder?: string;
-    actions?: NavigationHeaderAction[];
-    emptyContent?: ReactNode;
-};
-
-export type ResolveNavigationDetail<T extends NavigationItem = NavigationItem> = (
-    item: T,
-) => NavigationDetailConfig | undefined;
-
-export type NavigationDetailConfigFactory<T extends NavigationItem = NavigationItem> = (
-    item: T,
-) => NavigationDetailConfig;
-
-export type NavigationSearchConfig = {
-    value?: string;
-    onUpdate?: (value: string) => void;
-};
-
-export type NavigationSortConfig = {
-    value?: NavigationSortOrder;
-    onUpdate?: (sort: NavigationSortOrder) => void;
-};
-
-export type NavigationListStateConfig = {
-    loading?: boolean;
-    error?: boolean | ReactNode;
-    hasMore?: boolean;
-    onLoadMore?: () => void;
-};
-
-export type NavigationHeaderConfig = {
-    actions?: NavigationHeaderAction[];
-    onLoadSuggestions?: LoadPathSuggestions;
-};
-
-export type NavigationDetailPanelConfig<TItem extends NavigationItem = NavigationItem> = {
-    openedItem?: TItem;
-    onItemOpen?: (item: TItem) => void;
-    onClose?: () => void;
-    resolve?: ResolveNavigationDetail<TItem>;
-    search?: string;
-    onSearchUpdate?: (value: string) => void;
-    activeTab?: string;
-    onTabUpdate?: (tab: string) => void;
-    actions?: NavigationHeaderAction[];
-};

package/src/types/pathEditor.ts

@@ -1,29 +0,0 @@
-import {ReactNode} from 'react';
-import type {NavigationItemKind} from './navigation';
-
-export type PathEditorSuggestion = {
-    parentPath: string;
-    childPath: string;
-    path: string;
-    icon?: ReactNode;
-    kind?: NavigationItemKind;
-    targetPathBroken?: boolean;
-};
-
-export type PathEditorSuggestionFilter = (
-    suggestions: PathEditorSuggestion[],
-) => PathEditorSuggestion[];
-
-export type PathEditorEventPayload = {
-    path: string;
-};
-
-export type LoadPathSuggestionsParams = {
-    path: string;
-    customFilter: PathEditorSuggestionFilter | undefined;
-    cluster: string | undefined;
-};
-
-export type LoadPathSuggestions = (
-    params: LoadPathSuggestionsParams,
-) => void | Promise<PathEditorSuggestion[]>;

package/src/types/queryList.ts

@@ -1,92 +0,0 @@
-import {ReactNode} from 'react';
-import {RegisteredFormFields} from './forms';
-
-/** ISO 8601 date string or Unix timestamp in milliseconds. */
-export type QueryTimestamp = string | number;
-
-export type QueryListRowRenderProps = {height: number};
-
-export type QueryListHeader = {header: string} & QueryListRowRenderProps;
-
-export type QueryListRow = {
-    id: number;
-    title: string;
-    query?: string;
-    href?: string;
-} & QueryListRowRenderProps;
-
-export type QueryListItem<T extends QueryListRow = QueryListRow> = QueryListHeader | T;
-
-export type QueryListRowVariant = 'default' | 'search';
-
-export type QueryListRowAction<T extends QueryListRow = QueryListRow> = {
-    text: ReactNode;
-    icon?: ReactNode;
-    theme?: 'normal' | 'danger';
-    hidden?: boolean;
-    disabled?: boolean;
-    onClick: (item: T) => void;
-};
-
-export type QueryListSearchConfig = {
-    value?: string;
-    fullSearch?: boolean;
-    hasClear?: boolean;
-    onUpdate: (data: {value: string; fullSearch: boolean}) => void;
-};
-
-export type QueryListFilterConfig = {
-    fields?: RegisteredFormFields[];
-    values?: Record<string, any>;
-    initialValues?: Record<string, any>;
-    isChanged?: boolean;
-    onApply?: (values: Record<string, any>) => void;
-    onReset?: () => void;
-};
-
-export type QueryListEditingConfig<T extends QueryListRow = QueryListRow> = {
-    rowId?: T['id'];
-    onSubmit?: (item: T, title: string) => void;
-    onCancel?: (item: T) => void;
-};
-
-export type QueryListComparisonConfig<T extends QueryListRow = QueryListRow> = {
-    enabled: boolean;
-    comparedRowIds: T['id'][];
-    onChange: (item: T, selected: boolean) => void;
-    onCancel: () => void;
-    onCompare: () => void;
-};
-
-type RowFieldKey<T extends QueryListRow> = Exclude<keyof T & string, keyof QueryListRowRenderProps>;
-
-export type QueryListFieldKey<T extends QueryListRow = QueryListRow> = RowFieldKey<T> | 'duration';
-
-export type QueryListFieldOption<K extends string = string> = {
-    id: K;
-    title: ReactNode;
-};
-
-export type QueryListVisibleFieldsConfig<T extends QueryListRow = QueryListRow> = {
-    value: QueryListFieldKey<T>[];
-    fields: QueryListFieldOption<QueryListFieldKey<T>>[];
-    onChange: (value: QueryListFieldKey<T>[]) => void;
-};
-
-export type QueryListEditingRenderData<T extends QueryListRow = QueryListRow> = {
-    enabled: boolean;
-} & Pick<QueryListEditingConfig<T>, 'onSubmit' | 'onCancel'>;
-
-export type QueryListRowRenderData<T extends QueryListRow = QueryListRow> = {
-    item: QueryListItem<T>;
-    index: number;
-    isActive: boolean;
-    variant: QueryListRowVariant;
-    comparison?: {
-        enabled: boolean;
-        checked: boolean;
-    };
-    visibleFields?: QueryListVisibleFieldsConfig<T>;
-    actions?: QueryListRowAction<T>[];
-    editing?: QueryListEditingRenderData<T>;
-};

package/src/types/savedQueries.ts

@@ -1,7 +0,0 @@
-import {QueryListRow, QueryTimestamp} from './queryList';
-
-export type SavedQuery = QueryListRow & {
-    savedAt?: QueryTimestamp;
-    engine?: string;
-    author?: string;
-};

package/src/types/tutorial.ts

@@ -1,3 +0,0 @@
-import {QueryListRow} from './queryList';
-
-export type TutorialHistoryRow = QueryListRow;

package/src/widgets/DashboardCharts/DashboardCharts.scss

@@ -1,25 +0,0 @@
-.qp-dashboard-charts {
-    box-sizing: border-box;
-    min-width: 0;
-    min-height: 480px;
-    background: var(--g-color-base-background);
-
-    &__dashboard {
-        min-height: 100%;
-    }
-
-    &__modal {
-        --g-modal-width: calc(100vw - var(--g-spacing-10));
-        --g-modal-max-width: 1200px;
-        --g-modal-height: calc(100vh - var(--g-spacing-10));
-        --g-modal-max-height: 720px;
-
-        overflow: hidden;
-    }
-
-    &__empty {
-        min-height: 320px;
-        border: 1px dashed var(--g-color-line-generic);
-        border-radius: var(--g-border-radius-m);
-    }
-}

package/src/widgets/DashboardCharts/DashboardCharts.tsx

@@ -1,214 +0,0 @@
-import React, {useCallback, useMemo, useState} from 'react';
-import {ChartSeries} from '@gravity-ui/charts';
-import {Flex, Modal} from '@gravity-ui/uikit';
-import {ChartEditor, ChartEditorProps} from '../../modules';
-import {AddChartButton, Chart, Dashboard} from '../../components';
-import {ChartData} from '../../modules/ChartEditor/types';
-import type {DashboardChartsProps, DashboardItem} from './types';
-import {EmptyDashboardPlaceholder} from './internal/EmptyDashboardPlaceholder';
-import {CHART_TYPE_ICONS} from './helpers/chartTypeIcons';
-import {ConfigLayout} from '@gravity-ui/dashkit';
-import i18n from './i18n';
-import cn from 'bem-cn-lite';
-import './DashboardCharts.scss';
-
-const block = cn('qp-dashboard-charts');
-
-export const DashboardCharts = ({
-    chartItems: customerChartsItems,
-    defaultLayout,
-    dataSource,
-    emptyTitle,
-    emptyDescription,
-    chartEditorProps,
-    dashboardProps,
-    onItemsChange,
-    onLayoutChange,
-    className,
-    gap = 1,
-}: DashboardChartsProps) => {
-    const [innerChartItems, setInnerChartItems] = useState<DashboardItem[]>(
-        customerChartsItems ?? [],
-    );
-
-    const chartItems = customerChartsItems ?? innerChartItems;
-
-    const [draftChart, setDraftChart] = useState<{
-        id?: string;
-        chartSeries: ChartEditorProps['chartSeriesMap'];
-        formValues: ChartEditorProps['formValues'];
-    } | null>(null);
-
-    const allowedCharts = useMemo(
-        () => Object.keys(dataSource) as ChartSeries['type'][],
-        [dataSource],
-    );
-
-    const handleChartSelect = (chartType: ChartSeries['type']) => {
-        const chartSeries = dataSource[chartType];
-
-        if (chartSeries) {
-            const dataIds = Object.keys(chartSeries);
-
-            setDraftChart({
-                chartSeries,
-                formValues: {
-                    dataIds: dataIds.length ? [dataIds[0]] : [],
-                    axisType: 'linear',
-                },
-            });
-        }
-    };
-
-    const handleCancelDraft = () => {
-        setDraftChart(null);
-    };
-
-    const handleSubmitChart = (chart: ChartData) => {
-        if (!draftChart) return;
-
-        const newChart = {
-            id: draftChart.id ?? crypto.randomUUID().replace(/-/g, ''),
-            chartData: chart,
-        };
-
-        const actualChartItems = draftChart.id
-            ? chartItems.map((ch) => (ch.id === newChart.id ? newChart : ch))
-            : [...chartItems, newChart];
-
-        setDraftChart(null);
-        setInnerChartItems(actualChartItems);
-        onItemsChange?.(actualChartItems);
-    };
-
-    const handleEditChart = useCallback(
-        (id: string, chart: DashboardItem['chartData']) => {
-            const chartType = chart.series.data[0].type;
-            const chartSeries = dataSource[chartType];
-
-            if (!chartSeries) return;
-
-            const selectedDataIds = chart.series.data.map((s) => s.seriesId);
-
-            setDraftChart({
-                id,
-                chartSeries,
-                formValues: {
-                    dataIds: selectedDataIds,
-                    chartTitle: chart.title?.text,
-                    xTitle: chart.xAxis?.title?.text,
-                    yTitle: chart.yAxis?.[0].title?.text,
-                    showLegend: chart?.legend?.enabled,
-                    axisType: chart.xAxis?.type,
-                    axisCategories: chart.xAxis?.categories,
-                },
-            });
-        },
-        [dataSource],
-    );
-
-    const handleDeleteChart = useCallback(
-        (id: string) => {
-            const newChartItems = chartItems.filter((item) => item.id !== id);
-
-            setInnerChartItems(newChartItems);
-
-            onItemsChange?.(newChartItems);
-        },
-        [chartItems, onItemsChange],
-    );
-
-    const handleLayoutChange = (patchedLayout: ConfigLayout[]) => {
-        onLayoutChange?.(patchedLayout);
-    };
-
-    const dashboardItems = useMemo(
-        () =>
-            chartItems.map(({id, chartData}) => ({
-                id,
-                content: (
-                    <Chart
-                        key={id}
-                        data={chartData}
-                        controlsVisibility="hover"
-                        onPencilEdit={() => handleEditChart(id, chartData)}
-                        actions={[
-                            {
-                                text: i18n('action_delete-chart'),
-                                onClick: () => handleDeleteChart(id),
-                            },
-                        ]}
-                    />
-                ),
-            })),
-        [chartItems, handleEditChart, handleDeleteChart],
-    );
-
-    return (
-        <React.Fragment>
-            <Flex
-                as="section"
-                direction="column"
-                width="100%"
-                height="100%"
-                gap={gap}
-                className={block(null, className)}
-            >
-                <AddChartButton
-                    text={i18n('action_add-chart')}
-                    options={allowedCharts.map((chartType) => ({
-                        value: chartType,
-                        text: chartType,
-                        icon: CHART_TYPE_ICONS[chartType],
-                    }))}
-                    onSelect={handleChartSelect}
-                    disabled={allowedCharts.length === 0}
-                />
-
-                {chartItems.length > 0 ? (
-                    <Dashboard
-                        items={dashboardItems}
-                        defaultLayout={defaultLayout}
-                        onLayoutChange={handleLayoutChange}
-                        className={block('dashboard')}
-                        {...dashboardProps}
-                    />
-                ) : (
-                    <EmptyDashboardPlaceholder
-                        emptyTitle={emptyTitle}
-                        emptyDescription={emptyDescription}
-                    />
-                )}
-            </Flex>
-
-            <Modal
-                open={Boolean(draftChart)}
-                onOpenChange={(open) => {
-                    if (!open) {
-                        setDraftChart(null);
-                    }
-                }}
-                contentOverflow="auto"
-                contentClassName={block('modal')}
-            >
-                {draftChart && (
-                    <ChartEditor
-                        chartSeriesMap={draftChart.chartSeries}
-                        formValues={draftChart.formValues}
-                        onSubmit={handleSubmitChart}
-                        onCancel={handleCancelDraft}
-                        axisVariants={['linear', 'datetime', 'logarithmic']}
-                        formProps={{
-                            labels: {
-                                submitLabel: draftChart.id
-                                    ? i18n('action_save-chart')
-                                    : i18n('action_add-chart'),
-                            },
-                        }}
-                        {...chartEditorProps}
-                    />
-                )}
-            </Modal>
-        </React.Fragment>
-    );
-};

package/src/widgets/DashboardCharts/helpers/chartTypeIcons.ts

@@ -1,33 +0,0 @@
-import {
-    BranchesRight,
-    ChartAreaStacked,
-    ChartBar,
-    ChartColumn,
-    ChartLine,
-    ChartPie,
-    ChartTreemap,
-    Circles4Square,
-    Circles5Random,
-    CirclesConcentric,
-    Funnel,
-    ListTimeline,
-    SquareBars,
-} from '@gravity-ui/icons';
-import type {ChartSeries} from '@gravity-ui/charts';
-import type {IconData} from '@gravity-ui/uikit';
-
-export const CHART_TYPE_ICONS: Record<ChartSeries['type'], IconData> = {
-    area: ChartAreaStacked,
-    'bar-x': ChartColumn,
-    'bar-y': ChartBar,
-    funnel: Funnel,
-    heatmap: Circles4Square,
-    line: ChartLine,
-    pie: ChartPie,
-    radar: CirclesConcentric,
-    sankey: BranchesRight,
-    scatter: Circles5Random,
-    treemap: ChartTreemap,
-    waterfall: SquareBars,
-    'x-range': ListTimeline,
-};

package/src/widgets/DashboardCharts/i18n/dicts.ts

@@ -1,4 +0,0 @@
-import en from './en.json';
-import ru from './ru.json';
-
-export default {en, ru};

package/src/widgets/DashboardCharts/i18n/en.json

@@ -1,7 +0,0 @@
-{
-  "action_add-chart": "Add chart",
-  "action_save-chart": "Save",
-  "action_delete-chart": "Delete",
-  "context_no-charts": "No charts yet",
-  "context_add-first-chart": "Add a chart to start building your dashboard"
-}

package/src/widgets/DashboardCharts/i18n/index.ts

@@ -1,5 +0,0 @@
-import {addI18Keysets} from '../../../i18n';
-
-import dicts from './dicts';
-
-export default addI18Keysets('qp:dashboard-charts', dicts);

package/src/widgets/DashboardCharts/i18n/ru.json

@@ -1,7 +0,0 @@
-{
-  "action_add-chart": "Добавить график",
-  "action_save-chart": "Сохранить",
-  "action_delete-chart": "Удалить",
-  "context_no-charts": "Графиков пока нет",
-  "context_add-first-chart": "Добавьте график, чтобы начать собирать дашборд"
-}

package/src/widgets/DashboardCharts/index.ts

@@ -1,2 +0,0 @@
-export {DashboardCharts} from './DashboardCharts';
-export type {DashboardChartsProps} from './types';

package/src/widgets/DashboardCharts/internal/EmptyDashboardPlaceholder.tsx

@@ -1,26 +0,0 @@
-import React, {ReactNode} from 'react';
-import {Flex, Text} from '@gravity-ui/uikit';
-import i18n from '../i18n';
-import cn from 'bem-cn-lite';
-
-type EmptyDashboardPlaceholderProps = {
-    emptyTitle?: ReactNode;
-    emptyDescription?: ReactNode;
-};
-
-const block = cn('qp-empty-dashboard-placeholder');
-
-export const EmptyDashboardPlaceholder = ({
-    emptyTitle,
-    emptyDescription,
-}: EmptyDashboardPlaceholderProps) => {
-    const resolvedEmptyTitle = emptyTitle ?? i18n('context_no-charts');
-    const resolvedEmptyDescription = emptyDescription ?? i18n('context_add-first-chart');
-
-    return (
-        <Flex direction="column" centerContent gap={1} className={block('empty')}>
-            <Text variant="subheader-2">{resolvedEmptyTitle}</Text>
-            <Text color="secondary">{resolvedEmptyDescription}</Text>
-        </Flex>
-    );
-};

package/src/widgets/DashboardCharts/story/DashboardCharts.stories.scss

@@ -1,6 +0,0 @@
-.qp-dashboard-charts-story {
-    box-sizing: border-box;
-    height: 720px;
-    padding: var(--g-spacing-4);
-    background: var(--g-color-base-background);
-}