@gravity-ui/querieskit 1.3.0 → 1.3.1

package/src/modules/NavigationHeader/NavigationHeader.stories.tsx

@@ -1,118 +0,0 @@
-import React, {useState} from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {action} from 'storybook/actions';
-import {Box, Icon} from '@gravity-ui/uikit';
-import FileArrowRightOutIcon from '@gravity-ui/icons/svgs/file-arrow-right-out.svg';
-import ArrowUpRightFromSquareIcon from '@gravity-ui/icons/svgs/arrow-up-right-from-square.svg';
-import {NavigationHeader} from './NavigationHeader';
-import {NavigationHeaderAction, NavigationLocation} from '../../types/navigation';
-import {mockLoadPathSuggestions} from '../../components/PathEditor/PathEditor.stories.helpers';
-
-const meta: Meta<typeof NavigationHeader> = {
-    title: 'Modules/NavigationHeader',
-    component: NavigationHeader,
-    tags: ['autodocs'],
-    parameters: {
-        layout: 'padded',
-    },
-};
-
-export default meta;
-type Story = StoryObj<typeof NavigationHeader>;
-
-const defaultLocation: NavigationLocation = {
-    cluster: 'test',
-    path: '/home/my-projects/favorites',
-};
-
-const longLocation: NavigationLocation = {
-    cluster: 'prod',
-    path: '/home/my-projects/favorites/very/long/nested/directory/structure',
-};
-
-const logAction = action('actionClick');
-
-const defaultActions: NavigationHeaderAction[] = [
-    {
-        id: 'paste',
-        title: 'Paste path',
-        content: <Icon data={FileArrowRightOutIcon} size={16} />,
-        onClick: (location) => logAction('Paste', location),
-    },
-    {
-        id: 'open',
-        title: 'Open in new tab',
-        content: <Icon data={ArrowUpRightFromSquareIcon} size={16} />,
-        onClick: (location) => logAction('Open', location),
-    },
-];
-
-const InteractiveStory = ({
-    initialLocation = defaultLocation,
-    actions = defaultActions,
-}: {
-    initialLocation?: NavigationLocation;
-    actions?: NavigationHeaderAction[];
-}) => {
-    const [location, setLocation] = useState(initialLocation);
-
-    return (
-        <Box width={300}>
-            <NavigationHeader
-                location={location}
-                actions={actions}
-                onUpdate={setLocation}
-                onLoadSuggestions={mockLoadPathSuggestions}
-            />
-        </Box>
-    );
-};
-
-export const Default: Story = {render: () => <InteractiveStory />};
-
-export const WithoutActions: Story = {
-    args: {
-        location: defaultLocation,
-        onUpdate: action('onUpdate'),
-        onLoadSuggestions: mockLoadPathSuggestions,
-    },
-    decorators: [
-        (StoryComponent) => (
-            <Box width={300}>
-                <StoryComponent />
-            </Box>
-        ),
-    ],
-};
-
-export const EmptyLocation: Story = {
-    args: {
-        location: {cluster: undefined, path: undefined},
-        actions: defaultActions,
-        onUpdate: action('onUpdate'),
-    },
-};
-
-export const LongPath: Story = {
-    render: () => <InteractiveStory initialLocation={longLocation} />,
-};
-
-export const DisabledAction: Story = {
-    render: () => (
-        <InteractiveStory
-            actions={defaultActions.map((headerAction) =>
-                headerAction.id === 'paste' ? {...headerAction, disabled: true} : headerAction,
-            )}
-        />
-    ),
-};
-
-export const HiddenAction: Story = {
-    render: () => (
-        <InteractiveStory
-            actions={defaultActions.map((headerAction) =>
-                headerAction.id === 'open' ? {...headerAction, hidden: true} : headerAction,
-            )}
-        />
-    ),
-};

package/src/modules/NavigationHeader/NavigationHeader.tsx

@@ -1,33 +0,0 @@
-import React, {FC} from 'react';
-import {Flex} from '@gravity-ui/uikit';
-import {Breadcrumbs} from '../../components/Breadcrumbs';
-import {NavigationActionButtons} from '../../components';
-import {NavigationHeaderAction, NavigationLocation} from '../../types/navigation';
-import type {LoadPathSuggestions} from '../../types/pathEditor';
-
-export type NavigationHeaderProps = {
-    location: NavigationLocation;
-    actions?: NavigationHeaderAction[];
-    onUpdate: (location: NavigationLocation) => void;
-    onLoadSuggestions?: LoadPathSuggestions;
-    className?: string;
-};
-
-export const NavigationHeader: FC<NavigationHeaderProps> = ({
-    location,
-    actions,
-    onUpdate,
-    onLoadSuggestions,
-    className,
-}) => {
-    return (
-        <Flex gap={2} justifyContent="space-between" alignItems="center" className={className}>
-            <Breadcrumbs
-                location={location}
-                onUpdate={onUpdate}
-                onLoadSuggestions={onLoadSuggestions}
-            />
-            <NavigationActionButtons actions={actions} arg={location} />
-        </Flex>
-    );
-};

package/src/modules/NavigationHeader/index.ts

@@ -1,2 +0,0 @@
-export {NavigationHeader} from './NavigationHeader';
-export type {NavigationHeaderProps} from './NavigationHeader';

package/src/modules/NavigationItemsList/NavigationItemsList.scss

@@ -1,65 +0,0 @@
-.qp-navigation-item-row {
-  width: 100%;
-  padding: 0 var(--g-spacing-2);
-  box-sizing: border-box;
-  cursor: pointer;
-
-  &__title {
-    flex-grow: 1;
-    min-width: 0;
-  }
-
-  &_disabled {
-    color: var(--g-color-text-secondary);
-    cursor: default;
-  }
-}
-
-.qp-navigation-items-list-header {
-  padding: 0 var(--g-spacing-2);
-
-  &__button {
-    padding-left: 0;
-  }
-}
-
-.qp-navigation-items-list {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-
-  &__header {
-    height: 28px;
-  }
-
-  &__list {
-    flex-grow: 1;
-    min-height: 0;
-
-    .g-list__item_selected:hover {
-      background-color: var(--g-color-base-selection-hover);
-    }
-  }
-
-  &__empty {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    min-height: 0;
-  }
-
-  &__parent-row {
-    flex-shrink: 0;
-    height: 32px;
-    cursor: pointer;
-
-    &:hover {
-      background-color: var(--g-color-base-simple-hover);
-    }
-  }
-
-  &__empty-content {
-    flex-grow: 1;
-    min-height: 0;
-  }
-}

package/src/modules/NavigationItemsList/NavigationItemsList.tsx

@@ -1,92 +0,0 @@
-import React from 'react';
-import cn from 'bem-cn-lite';
-import {NavigationItem, NavigationSortOrder, RenderNavigationItem} from '../../types/navigation';
-import {LazyList, NavigationItemRow} from '../../components';
-import {NavigationItemsListHeader} from './internal/NavigationItemsListHeader';
-import {NavigationItemsListEmptyState} from './internal/NavigationItemsListEmptyState';
-import {useParentRow} from './internal/useParentRow';
-import {NAVIGATION_ROW_HEIGHT} from '../../constants/row';
-import './NavigationItemsList.scss';
-
-const block = cn('qp-navigation-items-list');
-
-export type NavigationItemsListProps<T extends NavigationItem = NavigationItem> = {
-    items: T[];
-    path?: string;
-    search?: string;
-    sort?: NavigationSortOrder;
-    onSortUpdate?: (sort: NavigationSortOrder) => void;
-    titleLabel: string;
-    loading?: boolean;
-    error?: React.ReactNode;
-    hasMore?: boolean;
-    onLoadMore?: () => void;
-    emptyContent?: React.ReactNode;
-    renderRowItem?: RenderNavigationItem<T>;
-    onItemClick?: (item: T) => void;
-    className?: string;
-};
-
-export const NavigationItemsList = <T extends NavigationItem = NavigationItem>({
-    items,
-    path,
-    search,
-    sort,
-    onSortUpdate,
-    titleLabel,
-    loading,
-    error,
-    hasMore,
-    onLoadMore,
-    emptyContent,
-    renderRowItem,
-    onItemClick,
-    className,
-}: NavigationItemsListProps<T>) => {
-    const parentRow = useParentRow(path, search);
-
-    const rows = (parentRow ? [parentRow as T, ...items] : items) as T[];
-
-    return (
-        <div className={block(null, className)}>
-            <NavigationItemsListHeader
-                titleLabel={titleLabel}
-                sort={sort}
-                onSortUpdate={onSortUpdate}
-                className={block('header')}
-            />
-            <LazyList<T>
-                className={block('list')}
-                items={rows}
-                isEmpty={!items.length}
-                itemHeight={() => NAVIGATION_ROW_HEIGHT}
-                renderItem={(item, isActive, index) => {
-                    const isParentRow = Boolean(parentRow) && item === (parentRow as T);
-
-                    return (
-                        renderRowItem?.({item, index, isActive, isParentRow}) ?? (
-                            <NavigationItemRow item={item} />
-                        )
-                    );
-                }}
-                hasMore={hasMore}
-                onLoadMore={onLoadMore}
-                loading={loading}
-                error={error}
-                emptyContent={
-                    <NavigationItemsListEmptyState
-                        parentRow={parentRow as T | undefined}
-                        emptyContent={emptyContent}
-                        renderRowItem={renderRowItem}
-                        onItemClick={onItemClick}
-                    />
-                }
-                onItemClick={(item) => {
-                    if (!item.disabled) {
-                        onItemClick?.(item);
-                    }
-                }}
-            />
-        </div>
-    );
-};

package/src/modules/NavigationItemsList/index.ts

@@ -1,2 +0,0 @@
-export {NavigationItemsList} from './NavigationItemsList';
-export type {NavigationItemsListProps} from './NavigationItemsList';

package/src/modules/NavigationItemsList/internal/NavigationItemsListEmptyState.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import {Flex} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import {NavigationItem, RenderNavigationItem} from '../../../types/navigation';
-import {NavigationItemRow} from '../../../components';
-
-const block = cn('qp-navigation-items-list');
-
-export type NavigationItemsListEmptyStateProps<T extends NavigationItem = NavigationItem> = {
-    parentRow?: T;
-    emptyContent?: React.ReactNode;
-    renderRowItem?: RenderNavigationItem<T>;
-    onItemClick?: (item: T) => void;
-};
-
-export const NavigationItemsListEmptyState = <T extends NavigationItem = NavigationItem>({
-    parentRow,
-    emptyContent,
-    renderRowItem,
-    onItemClick,
-}: NavigationItemsListEmptyStateProps<T>) => {
-    return (
-        <div className={block('empty')}>
-            {parentRow && (
-                <Flex
-                    className={block('parent-row')}
-                    alignItems="center"
-                    onClick={() => {
-                        if (!parentRow.disabled) {
-                            onItemClick?.(parentRow);
-                        }
-                    }}
-                >
-                    {renderRowItem?.({
-                        item: parentRow,
-                        index: 0,
-                        isActive: false,
-                        isParentRow: true,
-                    }) ?? <NavigationItemRow item={parentRow} />}
-                </Flex>
-            )}
-            <div className={block('empty-content')}>{emptyContent}</div>
-        </div>
-    );
-};

package/src/modules/NavigationItemsList/internal/NavigationItemsListHeader.scss

@@ -1,6 +0,0 @@
-.qp-navigation-items-list-header {
-  &__sort {
-    cursor: pointer;
-    user-select: none;
-  }
-}

package/src/modules/NavigationItemsList/internal/NavigationItemsListHeader.tsx

@@ -1,54 +0,0 @@
-import React, {FC} from 'react';
-import {Flex, Icon, Text} from '@gravity-ui/uikit';
-import ArrowUpIcon from '@gravity-ui/icons/svgs/arrow-up.svg';
-import ArrowDownIcon from '@gravity-ui/icons/svgs/arrow-down.svg';
-import ArrowUpArrowDownIcon from '@gravity-ui/icons/svgs/arrow-up-arrow-down.svg';
-import cn from 'bem-cn-lite';
-import {NavigationSortOrder} from '../../../types/navigation';
-import './NavigationItemsListHeader.scss';
-
-const block = cn('qp-navigation-items-list-header');
-
-const SORT_ICONS: Record<NavigationSortOrder, typeof ArrowUpIcon> = {
-    asc: ArrowUpIcon,
-    desc: ArrowDownIcon,
-};
-
-export type NavigationItemsListHeaderProps = {
-    titleLabel: string;
-    sort?: NavigationSortOrder;
-    onSortUpdate?: (sort: NavigationSortOrder) => void;
-    className?: string;
-};
-
-export const NavigationItemsListHeader: FC<NavigationItemsListHeaderProps> = ({
-    titleLabel,
-    sort,
-    onSortUpdate,
-    className,
-}) => {
-    if (!onSortUpdate) {
-        return null;
-    }
-
-    const handleClick = () => {
-        onSortUpdate(sort === 'asc' ? 'desc' : 'asc');
-    };
-
-    const icon = sort ? SORT_ICONS[sort] : ArrowUpArrowDownIcon;
-
-    return (
-        <Flex alignItems="center" className={block(null, className)}>
-            <Flex
-                inline
-                gap={2}
-                alignItems="center"
-                className={block('sort')}
-                onClick={handleClick}
-            >
-                <Text>{titleLabel}</Text>
-                <Icon data={icon} size={16} />
-            </Flex>
-        </Flex>
-    );
-};

package/src/modules/NavigationItemsList/internal/useParentRow.ts

@@ -1,23 +0,0 @@
-import {useMemo} from 'react';
-import {NavigationItem} from '../../../types/navigation';
-import {getParentPath} from '../../../helpers/getParentPath';
-
-export function useParentRow(
-    path: string | undefined,
-    search: string | undefined,
-): NavigationItem | undefined {
-    const parentPath = path && !search ? getParentPath(path) : undefined;
-
-    return useMemo<NavigationItem | undefined>(() => {
-        if (!parentPath) {
-            return undefined;
-        }
-
-        return {
-            path: parentPath,
-            title: '\u2026',
-            kind: 'folder',
-            hasChildren: true,
-        };
-    }, [parentPath]);
-}

package/src/modules/NavigationMeta/NavigationMeta.scss

@@ -1,25 +0,0 @@
-.qp-navigation-meta {
-  &__error {
-    display: block;
-  }
-
-  &__group-title {
-    display: block;
-    margin-bottom: var(--g-spacing-2);
-  }
-
-  &__group-body {
-    width: 100%;
-    display: grid;
-    grid-gap: 12px;
-    grid-template-columns: 128px 1fr;
-  }
-
-  &__skeleton-row {
-    height: 24px;
-  }
-
-  &__empty {
-    height: 100%;
-  }
-}

package/src/modules/NavigationMeta/NavigationMeta.tsx

@@ -1,81 +0,0 @@
-import React, {useMemo} from 'react';
-import {Flex, Text} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import {EmptyContent, SkeletonRows} from '../../components';
-import type {NavigationMetaConfig, NavigationMetaItem} from '../../types/navigation';
-import {buildMetaGroups} from './helpers/buildMetaGroups';
-import i18n from './i18n';
-import './NavigationMeta.scss';
-
-const block = cn('qp-navigation-meta');
-
-export type NavigationMetaViewConfig<TItem extends NavigationMetaItem = NavigationMetaItem> = {
-    render?: (data: NavigationMetaConfig<TItem>) => React.ReactNode;
-    extraContent?: React.ReactNode;
-};
-
-export type NavigationMetaProps<TItem extends NavigationMetaItem = NavigationMetaItem> = {
-    data: NavigationMetaConfig<TItem>;
-    view?: NavigationMetaViewConfig<TItem>;
-    className?: string;
-};
-
-export function NavigationMeta<TItem extends NavigationMetaItem = NavigationMetaItem>({
-    data,
-    view,
-    className,
-}: NavigationMetaProps<TItem>) {
-    const {groups, loading, loaded, errorContent} = data;
-    const {render, extraContent} = view ?? {};
-
-    const preparedGroups = useMemo(() => buildMetaGroups(groups, i18n), [groups]);
-
-    if (render) {
-        return <div className={block(null, className)}>{render(data)}</div>;
-    }
-
-    if (errorContent) {
-        return (
-            <Text color="danger" className={block('error')}>
-                {errorContent}
-            </Text>
-        );
-    }
-
-    if (loading && !loaded) {
-        return (
-            <SkeletonRows className={block(null, className)} rowClassName={block('skeleton-row')} />
-        );
-    }
-
-    const isEmpty = preparedGroups.every((group) => group.items.length === 0);
-
-    if (isEmpty && !extraContent) {
-        return <EmptyContent variant="no-data" className={block('empty')} />;
-    }
-
-    return (
-        <Flex direction="column" gap={4} className={block(null, className)}>
-            {preparedGroups.map((group, groupIndex) =>
-                group.items.length === 0 ? null : (
-                    <div key={groupIndex} className={block('group')}>
-                        {group.title ? (
-                            <Text variant="subheader-1" className={block('group-title')}>
-                                {group.title}
-                            </Text>
-                        ) : null}
-                        <div className={block('group-body')}>
-                            {group.items.map(({name, value}) => (
-                                <>
-                                    <Text color="secondary">{name}</Text>
-                                    <div>{value}</div>
-                                </>
-                            ))}
-                        </div>
-                    </div>
-                ),
-            )}
-            {extraContent}
-        </Flex>
-    );
-}

package/src/modules/NavigationMeta/helpers/buildMetaGroups.tsx

@@ -1,27 +0,0 @@
-import type {ReactNode} from 'react';
-import {isEmptyValue} from '../../../helpers/isEmptyValue';
-import type {NavigationMetaGroup, NavigationMetaItem} from '../../../types/navigation';
-import type metaI18n from '../i18n';
-
-export type PreparedMetaItem = {
-    name: string;
-    value: ReactNode;
-};
-
-export type PreparedMetaGroup = {
-    title?: string;
-    items: PreparedMetaItem[];
-};
-
-export function buildMetaGroups<TItem extends NavigationMetaItem>(
-    groups: Array<NavigationMetaGroup<TItem>>,
-    i18n: typeof metaI18n,
-): PreparedMetaGroup[] {
-    return groups.map((group) => ({
-        title: group.title,
-        items: group.items.map((item) => ({
-            name: item.name,
-            value: isEmptyValue(item.value) ? i18n('value_empty') : item.value,
-        })),
-    }));
-}

package/src/modules/NavigationMeta/i18n/dicts.ts

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

package/src/modules/NavigationMeta/i18n/en.json

@@ -1,4 +0,0 @@
-{
-    "value_empty": "—",
-    "context_empty": "No metadata"
-}

package/src/modules/NavigationMeta/i18n/index.ts

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

package/src/modules/NavigationMeta/i18n/ru.json

@@ -1,4 +0,0 @@
-{
-    "value_empty": "—",
-    "context_empty": "Нет метаданных"
-}

package/src/modules/NavigationMeta/index.ts

@@ -1,3 +0,0 @@
-export {NavigationMeta} from './NavigationMeta';
-export type {NavigationMetaProps, NavigationMetaViewConfig} from './NavigationMeta';
-export {buildMetaGroups} from './helpers/buildMetaGroups';