@drivenets/design-system 0.18.1 → 0.20.0

package/src/components/ds-filters-bar/components/ds-filters-bar-builder/ds-filters-bar-builder.types.ts

@@ -0,0 +1,41 @@
+import type { CSSProperties } from 'react';
+
+export interface DsFiltersBarBuilderLocale {
+	title?: string;
+	searchField?: string;
+	selectField?: string;
+	searchSubfield?: string;
+	selectSubfield?: string;
+	searchOperator?: string;
+	selectOperator?: string;
+	valuePlaceholder?: string;
+	save?: string;
+}
+
+export const defaultDsFiltersBarBuilderLocale: Required<DsFiltersBarBuilderLocale> = Object.freeze({
+	title: 'Query builder',
+	searchField: 'Search field',
+	selectField: 'Select a field',
+	searchSubfield: 'Search subfield',
+	selectSubfield: 'Select a subfield',
+	searchOperator: 'Search operator',
+	selectOperator: 'Select an operator',
+	valuePlaceholder: 'Value',
+	save: 'Save query',
+});
+
+/**
+ * Query builder view: builds one condition step by step. The field's type decides the steps —
+ * compound: subfield, operator, value; text and number: operator, value; enum: value.
+ */
+export interface DsFiltersBarBuilderProps {
+	/**
+	 * Field ids offered first, in this order — chosen by product or suggested by AI. Every field in
+	 * the bar stays searchable.
+	 * @default all fields, in `fields` order
+	 */
+	suggestedFields?: ReadonlyArray<string>;
+	locale?: DsFiltersBarBuilderLocale;
+	className?: string;
+	style?: CSSProperties;
+}

package/src/components/ds-filters-bar/components/ds-filters-bar-builder/index.ts

@@ -0,0 +1 @@
+export { Builder } from './ds-filters-bar-builder';

package/src/components/ds-filters-bar/components/ds-filters-bar-clear-all.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { useDsFiltersBarContext } from '../ds-filters-bar.context';
+import type { DsFiltersBarClearAllProps } from '../ds-filters-bar.types';
+
+export const ClearAll: FC<DsFiltersBarClearAllProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+ClearAll.displayName = 'DsFiltersBar.ClearAll';

package/src/components/ds-filters-bar/components/ds-filters-bar-conditions/ds-filters-bar-conditions.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { useDsFiltersBarContext } from '../../ds-filters-bar.context';
+import type { DsFiltersBarConditionsProps } from './ds-filters-bar-conditions.types';
+
+export const Conditions: FC<DsFiltersBarConditionsProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+Conditions.displayName = 'DsFiltersBar.Conditions';

package/src/components/ds-filters-bar/components/ds-filters-bar-conditions/ds-filters-bar-conditions.types.ts

@@ -0,0 +1,30 @@
+import type { CSSProperties } from 'react';
+
+export interface DsFiltersBarConditionsLocale {
+	/**
+	 * Accessible name of the icon-only button that opens the filters dialog
+	 */
+	addFilter?: string;
+	/**
+	 * Accessible name of a chip's remove button. Receives the chip's field label.
+	 */
+	removeCondition?: (label: string) => string;
+	filtersDialogTitle?: string;
+	saveFilters?: string;
+}
+
+export const defaultDsFiltersBarConditionsLocale: Required<DsFiltersBarConditionsLocale> = Object.freeze({
+	addFilter: 'Add filter',
+	removeCondition: (label: string) => `Remove filter: ${label}`,
+	filtersDialogTitle: 'Filters',
+	saveFilters: 'Save filters',
+});
+
+/**
+ * Filters view: the add-filter button with its filters dialog, and one chip per condition.
+ */
+export interface DsFiltersBarConditionsProps {
+	locale?: DsFiltersBarConditionsLocale;
+	className?: string;
+	style?: CSSProperties;
+}

package/src/components/ds-filters-bar/components/ds-filters-bar-conditions/index.ts

@@ -0,0 +1 @@
+export { Conditions } from './ds-filters-bar-conditions';

package/src/components/ds-filters-bar/components/ds-filters-bar-pinned.ts

@@ -0,0 +1,31 @@
+import type { FC } from 'react';
+import { useDsFiltersBarContext } from '../ds-filters-bar.context';
+import type {
+	DsFiltersBarPinnedProps,
+	DsFiltersBarPinnedGroupProps,
+	DsFiltersBarPinnedToggleProps,
+} from '../ds-filters-bar.types';
+
+export const Pinned: FC<DsFiltersBarPinnedProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+Pinned.displayName = 'DsFiltersBar.Pinned';
+
+export const PinnedGroup: FC<DsFiltersBarPinnedGroupProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+PinnedGroup.displayName = 'DsFiltersBar.PinnedGroup';
+
+export const PinnedToggle: FC<DsFiltersBarPinnedToggleProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+PinnedToggle.displayName = 'DsFiltersBar.PinnedToggle';

package/src/components/ds-filters-bar/components/ds-filters-bar-query/ds-filters-bar-query.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { useDsFiltersBarContext } from '../../ds-filters-bar.context';
+import type { DsFiltersBarQueryProps } from './ds-filters-bar-query.types';
+
+export const Query: FC<DsFiltersBarQueryProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+Query.displayName = 'DsFiltersBar.Query';

package/src/components/ds-filters-bar/components/ds-filters-bar-query/ds-filters-bar-query.types.ts

@@ -0,0 +1,22 @@
+import type { CSSProperties } from 'react';
+
+export interface DsFiltersBarQueryLocale {
+	placeholder?: string;
+}
+
+export const defaultDsFiltersBarQueryLocale: Required<DsFiltersBarQueryLocale> = Object.freeze({
+	placeholder: 'status = "Active" AND trigger = "Scheduled"',
+});
+
+/**
+ * Advanced query view: one-line code field with an overlay for long queries.
+ */
+export interface DsFiltersBarQueryProps {
+	/**
+	 * @default false
+	 */
+	disabled?: boolean;
+	locale?: DsFiltersBarQueryLocale;
+	className?: string;
+	style?: CSSProperties;
+}

package/src/components/ds-filters-bar/components/ds-filters-bar-query/index.ts

@@ -0,0 +1 @@
+export { Query } from './ds-filters-bar-query';

package/src/components/ds-filters-bar/components/ds-filters-bar-saved-filters.ts

@@ -0,0 +1,19 @@
+import type { FC } from 'react';
+import { useDsFiltersBarContext } from '../ds-filters-bar.context';
+import type { DsFiltersBarSavedFiltersProps, DsFiltersBarSaveFilterProps } from '../ds-filters-bar.types';
+
+export const SavedFilters: FC<DsFiltersBarSavedFiltersProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+SavedFilters.displayName = 'DsFiltersBar.SavedFilters';
+
+export const SaveFilter: FC<DsFiltersBarSaveFilterProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+SaveFilter.displayName = 'DsFiltersBar.SaveFilter';

package/src/components/ds-filters-bar/components/ds-filters-bar-search.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { useDsFiltersBarContext } from '../ds-filters-bar.context';
+import type { DsFiltersBarSearchProps } from '../ds-filters-bar.types';
+
+export const Search: FC<DsFiltersBarSearchProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+Search.displayName = 'DsFiltersBar.Search';

package/src/components/ds-filters-bar/components/ds-filters-bar-summary.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { useDsFiltersBarContext } from '../ds-filters-bar.context';
+import type { DsFiltersBarSummaryProps } from '../ds-filters-bar.types';
+
+export const Summary: FC<DsFiltersBarSummaryProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+Summary.displayName = 'DsFiltersBar.Summary';

package/src/components/ds-filters-bar/components/ds-filters-bar-toolbar.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { useDsFiltersBarContext } from '../ds-filters-bar.context';
+import type { DsFiltersBarToolbarProps } from '../ds-filters-bar.types';
+
+export const Toolbar: FC<DsFiltersBarToolbarProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+Toolbar.displayName = 'DsFiltersBar.Toolbar';

package/src/components/ds-filters-bar/components/ds-filters-bar-view-switch.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { useDsFiltersBarContext } from '../ds-filters-bar.context';
+import type { DsFiltersBarViewSwitchProps } from '../ds-filters-bar.types';
+
+export const ViewSwitch: FC<DsFiltersBarViewSwitchProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+ViewSwitch.displayName = 'DsFiltersBar.ViewSwitch';

package/src/components/ds-filters-bar/components/ds-filters-bar-view.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { useDsFiltersBarContext } from '../ds-filters-bar.context';
+import type { DsFiltersBarViewProps } from '../ds-filters-bar.types';
+
+export const View: FC<DsFiltersBarViewProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+View.displayName = 'DsFiltersBar.View';

package/src/components/ds-filters-bar/components/index.ts

@@ -0,0 +1,11 @@
+export { ClearAll } from './ds-filters-bar-clear-all';
+export { Pinned, PinnedGroup, PinnedToggle } from './ds-filters-bar-pinned';
+export { SavedFilters, SaveFilter } from './ds-filters-bar-saved-filters';
+export { Search } from './ds-filters-bar-search';
+export { Summary } from './ds-filters-bar-summary';
+export { Toolbar } from './ds-filters-bar-toolbar';
+export { View } from './ds-filters-bar-view';
+export { ViewSwitch } from './ds-filters-bar-view-switch';
+export { Builder } from './ds-filters-bar-builder';
+export { Conditions } from './ds-filters-bar-conditions';
+export { Query } from './ds-filters-bar-query';

package/src/components/ds-filters-bar/ds-filters-bar.context.ts

@@ -0,0 +1,69 @@
+import { createContext, useContext } from 'react';
+import type {
+	DsFilterCondition,
+	DsFilterField,
+	DsFilterPin,
+	DsFiltersBarLocale,
+	DsFiltersBarView,
+} from './ds-filters-bar.types';
+
+/**
+ * The contract every part builds on. View parts read the filter document from here and write it
+ * back through these actions only, so all views stay one source of truth.
+ */
+export interface DsFiltersBarContextValue {
+	fields: ReadonlyArray<DsFilterField>;
+	conditions: ReadonlyArray<DsFilterCondition>;
+	/**
+	 * Edited advanced query, or `null` while the conditions are the source
+	 */
+	query: string | null;
+	/**
+	 * What the advanced view shows: the edited query, or the consumer's rendering of the conditions
+	 */
+	queryText: string;
+	pins: ReadonlyArray<DsFilterPin>;
+	/**
+	 * No conditions and no edited query
+	 */
+	isEmpty: boolean;
+	lockedViews: ReadonlyArray<DsFiltersBarView>;
+	expanded: boolean;
+	view: DsFiltersBarView;
+	/**
+	 * Id of the expanded toolbar, referenced by the disclosure button's `aria-controls`
+	 */
+	toolbarId: string;
+	locale: Required<DsFiltersBarLocale>;
+	setConditions: (conditions: ReadonlyArray<DsFilterCondition>) => void;
+	addCondition: (condition: DsFilterCondition) => void;
+	/**
+	 * Replaces the condition with the same `id`
+	 */
+	updateCondition: (condition: DsFilterCondition) => void;
+	removeCondition: (id: string) => void;
+	/**
+	 * Setting text makes the query the source; blank text or `null` hands control back to the
+	 * conditions.
+	 */
+	setQuery: (query: string | null) => void;
+	setPins: (pins: ReadonlyArray<DsFilterPin>) => void;
+	/**
+	 * Empties the conditions and drops the edited query. Pins stay.
+	 */
+	clear: () => void;
+	setExpanded: (expanded: boolean) => void;
+	setView: (view: DsFiltersBarView) => void;
+}
+
+export const DsFiltersBarContext = createContext<DsFiltersBarContextValue | null>(null);
+
+export const useDsFiltersBarContext = () => {
+	const context = useContext(DsFiltersBarContext);
+
+	if (!context) {
+		throw new Error('DsFiltersBar compound components must be used within DsFiltersBar.Root');
+	}
+
+	return context;
+};

package/src/components/ds-filters-bar/ds-filters-bar.tsx

@@ -0,0 +1,120 @@
+import { useId } from 'react';
+import { useControlled } from '../../utils/use-controlled';
+import {
+	Builder,
+	ClearAll,
+	Conditions,
+	Pinned,
+	PinnedGroup,
+	PinnedToggle,
+	Query,
+	SavedFilters,
+	SaveFilter,
+	Search,
+	Summary,
+	Toolbar,
+	View,
+	ViewSwitch,
+} from './components';
+import { DsFiltersBarContext } from './ds-filters-bar.context';
+import {
+	defaultDsFiltersBarLocale,
+	type DsFilterCondition,
+	type DsFilterPin,
+	type DsFiltersBarRootProps,
+	type DsFiltersBarView,
+} from './ds-filters-bar.types';
+import {
+	appendCondition,
+	lockedViewsFor,
+	normalizeQuery,
+	removeConditionById,
+	replaceCondition,
+} from './ds-filters-bar.utils';
+
+const EMPTY_FIELDS = Object.freeze([]);
+const EMPTY_CONDITIONS: ReadonlyArray<DsFilterCondition> = Object.freeze([]);
+const EMPTY_PINS: ReadonlyArray<DsFilterPin> = Object.freeze([]);
+const formatNothing = () => '';
+
+// TODO: render. Root only provides the context and every part returns null.
+const Root = ({
+	fields = EMPTY_FIELDS,
+	conditions: conditionsProp,
+	defaultConditions = EMPTY_CONDITIONS,
+	query: queryProp,
+	defaultQuery = null,
+	pins: pinsProp,
+	defaultPins = EMPTY_PINS,
+	expanded: expandedProp,
+	defaultExpanded = false,
+	view: viewProp,
+	defaultView = 'filters',
+	formatQuery = formatNothing,
+	locale,
+	children,
+	onConditionsChange,
+	onQueryChange,
+	onPinsChange,
+	onExpandedChange,
+	onViewChange,
+}: DsFiltersBarRootProps) => {
+	const [conditions, setConditions] = useControlled(conditionsProp, onConditionsChange, defaultConditions);
+	const [query, setQuery] = useControlled<string | null>(queryProp, onQueryChange, defaultQuery);
+	const [pins, setPins] = useControlled(pinsProp, onPinsChange, defaultPins);
+	const [expanded, setExpanded] = useControlled(expandedProp, onExpandedChange, defaultExpanded);
+	const [view, setView] = useControlled<DsFiltersBarView>(viewProp, onViewChange, defaultView);
+	const toolbarId = useId();
+
+	return (
+		<DsFiltersBarContext.Provider
+			value={{
+				fields,
+				conditions,
+				query,
+				queryText: query ?? formatQuery(conditions, fields),
+				pins,
+				isEmpty: query === null && conditions.length === 0,
+				lockedViews: lockedViewsFor(query),
+				expanded,
+				view,
+				toolbarId,
+				locale: { ...defaultDsFiltersBarLocale, ...locale },
+				setConditions,
+				addCondition: (condition) => setConditions(appendCondition(conditions, condition)),
+				updateCondition: (condition) => setConditions(replaceCondition(conditions, condition)),
+				removeCondition: (id) => setConditions(removeConditionById(conditions, id)),
+				setQuery: (next) => setQuery(normalizeQuery(next)),
+				setPins,
+				clear: () => {
+					setConditions(EMPTY_CONDITIONS);
+					setQuery(null);
+				},
+				setExpanded,
+				setView,
+			}}
+		>
+			{children}
+		</DsFiltersBarContext.Provider>
+	);
+};
+
+Root.displayName = 'DsFiltersBar.Root';
+
+export const DsFiltersBar = {
+	Root,
+	Summary,
+	Toolbar,
+	SavedFilters,
+	SaveFilter,
+	Search,
+	ViewSwitch,
+	View,
+	Conditions,
+	Builder,
+	Query,
+	ClearAll,
+	Pinned,
+	PinnedGroup,
+	PinnedToggle,
+};