@drivenets/design-system 0.0.1

package/package.json

@@ -0,0 +1,104 @@
+{
+  "name": "@drivenets/design-system",
+  "version": "0.0.1",
+  "license": "Apache-2.0",
+  "type": "module",
+  "types": "./dist/index.d.cts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./src/styles/*": "./src/styles/*"
+  },
+  "files": [
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE",
+    "./dist",
+    "./src",
+    "!**/__tests__",
+    "!./src/**/*.d.ts",
+    "!**/stories",
+    "!**/*.stories.*"
+  ],
+  "dependencies": {
+    "@ark-ui/react": "^5.18.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@radix-ui/react-checkbox": "^1.1.5",
+    "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-dialog": "^1.1.13",
+    "@radix-ui/react-dropdown-menu": "^2.1.14",
+    "@radix-ui/react-popover": "^1.1.11",
+    "@radix-ui/react-radio-group": "^1.2.4",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tooltip": "^1.2.4",
+    "@radix-ui/react-visually-hidden": "^1.2.2",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.6",
+    "@zag-js/react": "^1.17.4",
+    "@zag-js/steps": "^1.17.4",
+    "classnames": "^2.5.1"
+  },
+  "peerDependencies": {
+    "react": "^19"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.2",
+    "@chromatic-com/storybook": "^4.1.3",
+    "@faker-js/faker": "^9.7.0",
+    "@hookform/resolvers": "^5.0.1",
+    "@storybook/addon-a11y": "^10.1.9",
+    "@storybook/addon-docs": "^10.1.9",
+    "@storybook/addon-vitest": "^10.1.9",
+    "@storybook/builder-vite": "^10.1.9",
+    "@storybook/react-vite": "^10.1.9",
+    "@tanstack/react-query": "^5.90.12",
+    "@tanstack/react-router": "^1.141.2",
+    "@types/eslint-plugin-jsx-a11y": "^6.10.1",
+    "@types/react": "^19.2.7",
+    "@vitest/browser": "^4.0.16",
+    "@vitest/browser-playwright": "^4.0.15",
+    "eslint": "^9.39.2",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-storybook": "^10.1.9",
+    "playwright": "^1.57.0",
+    "postcss": "^8.5.6",
+    "postcss-modules": "^6.0.1",
+    "publint": "^0.3.16",
+    "react": "^19.2.3",
+    "react-hook-form": "^7.55.0",
+    "rollup-plugin-sass": "^1.15.3",
+    "sass-embedded": "^1.97.0",
+    "storybook": "^10.1.9",
+    "tsdown": "^0.18.0",
+    "typescript": "^5.9.3",
+    "typescript-plugin-css-modules": "^5.2.0",
+    "vite": "^7.3.0",
+    "vitest": "^4.0.16",
+    "zod": "^3.24.2",
+    "@drivenets/vite-plugin-design-system": "0.0.1"
+  },
+  "scripts": {
+    "lint": "eslint --max-warnings=0 .",
+    "typecheck": "tsc",
+    "storybook": "storybook dev -p 6006",
+    "test": "vitest",
+    "build": "tsdown",
+    "build:storybook": "storybook build",
+    "build:lint": "publint && attw --pack"
+  }
+}

package/src/components/ds-alert-banner/ds-alert-banner.module.scss

@@ -0,0 +1,116 @@
+@use '../../styles/typography';
+
+.alertBanner {
+	&.inline {
+		display: grid;
+		grid-template-columns: auto 1fr auto;
+		grid-template-rows: auto auto auto;
+		grid-template-areas:
+			'icon title close'
+			'icon description close'
+			'icon actions close';
+		align-items: start;
+		padding: var(--spacing-standard);
+		border-radius: 4px;
+		border: 1px solid;
+		column-gap: var(--spacing-xs);
+		row-gap: var(--spacing-4xs);
+
+		&:not(:has(.title)) {
+			align-items: center;
+		}
+	}
+
+	&.global {
+		display: flex;
+		align-items: center;
+		padding: var(--spacing-sm) var(--spacing-standard);
+		gap: var(--spacing-2xs);
+		border-bottom: 2px solid;
+
+		.title {
+			display: none;
+		}
+
+		.description {
+			@include typography.ellipsis;
+			flex: 1;
+		}
+	}
+
+	&.hidden {
+		display: none;
+	}
+
+	.icon {
+		grid-area: icon;
+	}
+
+	.title {
+		grid-area: title;
+		color: var(--color-font-main);
+	}
+
+	.description {
+		grid-area: description;
+		color: var(--color-font-secondary);
+		margin-top: var(--spacing-4xs);
+	}
+
+	.actions {
+		grid-area: actions;
+		display: inline-flex;
+		gap: var(--spacing-xs);
+	}
+
+	.closeButton {
+		grid-area: close;
+		display: flex;
+		color: var(--color-background-action);
+	}
+
+	&.infoNeutral {
+		background-color: var(--color-background-secondary);
+		border-color: var(--color-border);
+
+		.icon {
+			color: var(--color-icon-secondary);
+		}
+	}
+
+	&.infoBlue {
+		background-color: var(--color-background-info);
+		border-color: var(--color-border-action-primary);
+
+		.icon {
+			color: var(--color-icon-primary);
+		}
+	}
+
+	&.warning {
+		background-color: var(--color-background-warning);
+		border-color: var(--color-background-warning-strong);
+
+		.icon {
+			color: var(--color-icon-warning);
+		}
+	}
+
+	&.error {
+		background-color: var(--color-background-danger-weak);
+		border-color: var(--color-border-danger-strong);
+
+		.icon {
+			color: var(--color-icon-danger);
+		}
+	}
+
+	&.success {
+		background-color: var(--color-background-success);
+		border-color: var(--color-border-success);
+
+		.icon {
+			color: var(--color-icon-success);
+		}
+	}
+}

package/src/components/ds-alert-banner/ds-alert-banner.tsx

@@ -0,0 +1,115 @@
+import type { CSSProperties, ReactNode } from 'react';
+import classNames from 'classnames';
+import styles from './ds-alert-banner.module.scss';
+import type { DsAlertBannerProps } from './ds-alert-banner.types';
+import { DsIcon } from '../ds-icon';
+import { DsTypography } from '../ds-typography';
+
+/**
+ * Design system AlertBanner component
+ * Controlled component that displays alert messages with different variants
+ */
+const DsAlertBanner = ({
+	open,
+	onOpenChange,
+	inline = false,
+	variant = 'info-blue',
+	icon,
+	closable = false,
+	className,
+	style = {},
+	children,
+}: DsAlertBannerProps) => {
+	const variantClass = {
+		'info-neutral': styles.infoNeutral,
+		'info-blue': styles.infoBlue,
+		warning: styles.warning,
+		error: styles.error,
+		success: styles.success,
+	}[variant];
+
+	const alertBannerClass = classNames(
+		styles.alertBanner,
+		inline && styles.inline,
+		!inline && styles.global,
+		variantClass,
+		{
+			[styles.hidden]: !open,
+		},
+		className,
+	);
+
+	const handleClose = () => {
+		onOpenChange(false);
+	};
+
+	if (!open) {
+		return null;
+	}
+
+	return (
+		<div className={alertBannerClass} style={style}>
+			{icon && <DsIcon className={styles.icon} icon={icon} size="small" filled />}
+			{children}
+			{closable && (
+				<button
+					type="button"
+					className={styles.closeButton}
+					onClick={handleClose}
+					aria-label="Close alert"
+					data-close
+				>
+					<DsIcon icon="close" size="small" />
+				</button>
+			)}
+		</div>
+	);
+};
+
+const Title = ({
+	style,
+	className,
+	children,
+}: {
+	style?: CSSProperties;
+	className?: string;
+	children: ReactNode;
+}) => (
+	<DsTypography style={style} className={classNames(styles.title, className)} variant="body-md-md">
+		{children}
+	</DsTypography>
+);
+
+const Body = ({
+	style,
+	className,
+	children,
+}: {
+	style?: CSSProperties;
+	className?: string;
+	children: ReactNode;
+}) => (
+	<DsTypography style={style} className={classNames(styles.description, className)} variant="body-sm-reg">
+		{children}
+	</DsTypography>
+);
+
+const Actions = ({
+	style,
+	className,
+	children,
+}: {
+	style?: CSSProperties;
+	className?: string;
+	children: ReactNode;
+}) => (
+	<div style={style} className={classNames(styles.actions, className)}>
+		{children}
+	</div>
+);
+
+DsAlertBanner.Title = Title;
+DsAlertBanner.Body = Body;
+DsAlertBanner.Actions = Actions;
+
+export default DsAlertBanner;

package/src/components/ds-alert-banner/ds-alert-banner.types.tsx

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+import type React from 'react';
+import type { IconType } from '../ds-icon';
+
+export const alertBannerVariants = ['info-neutral', 'info-blue', 'warning', 'error', 'success'] as const;
+export type AlertBannerVariant = (typeof alertBannerVariants)[number];
+
+export interface DsAlertBannerProps {
+	/**
+	 * Controls whether the alert banner is visible
+	 */
+	open: boolean;
+	/**
+	 * Callback fired when the alert banner should be closed
+	 */
+	onOpenChange: (open: boolean) => void;
+	/**
+	 * Whether the alert banner should be inline (normal document flow) instead of global (designed for top of the page)
+	 * @default false
+	 */
+	inline?: boolean;
+	/**
+	 * The variant of the alert banner
+	 * @default 'info-blue'
+	 */
+	variant?: AlertBannerVariant;
+	/**
+	 * Optional icon to display using DsIcon
+	 */
+	icon?: IconType;
+	/**
+	 * Whether the alert banner can be closed with an X button
+	 */
+	closable?: boolean;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Additional styles to apply to the component
+	 */
+	style?: React.CSSProperties;
+	/**
+	 * Optional children to be rendered inside the component (typically action buttons)
+	 */
+	children?: ReactNode;
+}

package/src/components/ds-alert-banner/index.tsx

@@ -0,0 +1,2 @@
+export { default as DsAlertBanner } from './ds-alert-banner';
+export * from './ds-alert-banner.types';

package/src/components/ds-breadcrumb/ds-breadcrumb.module.scss

@@ -0,0 +1,99 @@
+@use '../../styles/typography';
+
+@mixin breadcrumb-item {
+	@include typography.body-sm-reg;
+	color: var(--color-background-action);
+	text-decoration: none;
+	outline: none;
+	padding: var(--exo-spacing-2x-small) var(--spacing-sm);
+	gap: var(--exo-spacing-2x-small);
+	border-radius: var(--exo-spacing-2x-small);
+	display: flex;
+	align-items: center;
+
+	&:hover {
+		color: var(--color-background-selected);
+		background: var(--color-background-action-tertiary);
+	}
+
+	&:active {
+		color: var(--color-background-selected-hover);
+		background: var(--color-background-action-secondary-hover);
+	}
+
+	&:focus {
+		outline: 2px solid var(--color-background-selected);
+		outline-offset: 0;
+	}
+
+	&:disabled {
+		color: var(--color-background-disable);
+	}
+}
+
+.breadcrumb {
+	display: flex;
+	align-items: center;
+}
+
+.list {
+	display: flex;
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.breadcrumbItem {
+	display: flex;
+	align-items: center;
+
+	&:not(:last-child)::after {
+		content: '/';
+		@include typography.body-sm-reg;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		color: var(--color-font-disabled);
+		width: var(--icon-width-small);
+		height: var(--icon-width-small);
+	}
+
+	&:last-child {
+		.link,
+		.trigger {
+			@include typography.body-sm-md;
+		}
+	}
+}
+
+.link {
+	@include breadcrumb-item;
+}
+
+.active {
+	@include typography.body-sm-md;
+}
+
+.trigger {
+	@include breadcrumb-item;
+	background: none;
+	border: none;
+	cursor: pointer;
+}
+
+.icon {
+	margin-right: var(--exo-spacing-2x-small);
+	display: flex;
+	align-items: center;
+}
+
+.dropdownIcon {
+	margin-left: var(--exo-spacing-2x-small);
+	display: flex;
+	align-items: center;
+}
+
+.itemLabel {
+	@include typography.ellipsis;
+	color: var(--color-font-main);
+}

package/src/components/ds-breadcrumb/ds-breadcrumb.tsx

@@ -0,0 +1,94 @@
+import type React from 'react';
+import { useState } from 'react';
+import { Link, useLocation } from '@tanstack/react-router';
+import classNames from 'classnames';
+import styles from './ds-breadcrumb.module.scss';
+import type { DsBreadcrumbProps } from './ds-breadcrumb.types';
+import { DsIcon } from '../ds-icon';
+import { DsDropdownMenu } from '../ds-dropdown-menu';
+import { DsTextInput } from '../ds-text-input/index';
+import { DsTypography } from '../ds-typography';
+
+/**
+ * Design system Breadcrumb component
+ */
+const DsBreadcrumb: React.FC<DsBreadcrumbProps> = ({ items, onSelect, className }) => {
+	const location = useLocation();
+	const [search, setSearch] = useState('');
+
+	return (
+		<nav className={classNames(styles.breadcrumb, className)} aria-label="Breadcrumb">
+			<ol className={styles.list}>
+				{items.map((item, index) => {
+					const selectedOption =
+						item.type === 'dropdown'
+							? item.options.find((option) => option.href === location.pathname)
+							: null;
+
+					const filteredOptions =
+						item.type === 'dropdown'
+							? item.options.filter((opt) => opt.label.toLowerCase().includes(search.toLowerCase()))
+							: [];
+
+					return (
+						<li key={index} className={styles.breadcrumbItem}>
+							{item.type === 'link' ? (
+								<Link
+									to={item.href}
+									className={classNames(styles.link)}
+									aria-current={index === items.length - 1 ? 'page' : undefined}
+									onClick={() => onSelect?.(item.href)}
+								>
+									{item.icon && <DsIcon icon={item.icon} className={styles.icon} size="small" />}
+									{item.label}
+								</Link>
+							) : (
+								<DsDropdownMenu.Root onSelect={onSelect}>
+									<DsDropdownMenu.Trigger
+										className={styles.trigger}
+										aria-current={index === items.length - 1 ? 'page' : undefined}
+									>
+										{item.icon && <DsIcon icon={item.icon} className={styles.icon} size="small" />}
+										{selectedOption?.label || item.label}
+										<DsIcon icon="arrow_drop_down" className={styles.dropdownIcon} />
+									</DsDropdownMenu.Trigger>
+									<DsDropdownMenu.Content>
+										<DsDropdownMenu.Header>
+											<DsTextInput
+												placeholder="Search"
+												value={search}
+												onValueChange={setSearch}
+												onKeyDown={(e) => e.stopPropagation()}
+												slots={{
+													startAdornment: <DsIcon icon="search" size="tiny" />,
+												}}
+											/>
+										</DsDropdownMenu.Header>
+										{filteredOptions.map((opt) => {
+											const selected = selectedOption?.href === opt.href;
+											return (
+												<DsTypography
+													key={opt.href}
+													className={styles.itemLabel}
+													variant="body-sm-reg"
+													asChild
+												>
+													<DsDropdownMenu.Item value={opt.href} selected={selected}>
+														{opt.label}
+														{selected && <DsDropdownMenu.ItemIndicator />}
+													</DsDropdownMenu.Item>
+												</DsTypography>
+											);
+										})}
+									</DsDropdownMenu.Content>
+								</DsDropdownMenu.Root>
+							)}
+						</li>
+					);
+				})}
+			</ol>
+		</nav>
+	);
+};
+
+export default DsBreadcrumb;

package/src/components/ds-breadcrumb/ds-breadcrumb.types.tsx

@@ -0,0 +1,32 @@
+import type { IconType } from '../ds-icon';
+
+export type DsBreadcrumbItem =
+	| {
+			type: 'link';
+			label: string;
+			href: string;
+			icon?: IconType;
+	  }
+	| {
+			type: 'dropdown';
+			label: string;
+			options: { label: string; href: string }[];
+			icon?: IconType;
+	  };
+
+export interface DsBreadcrumbProps {
+	/**
+	 * The items to be displayed in the breadcrumb
+	 */
+	items: DsBreadcrumbItem[];
+	/**
+	 * The event handler to be called when an option is selected
+	 *
+	 * @param href
+	 */
+	onSelect?: (href: string) => void;
+	/**
+	 * Additional CSS class name to be applied to the breadcrumb
+	 */
+	className?: string;
+}

package/src/components/ds-breadcrumb/index.tsx

@@ -0,0 +1,2 @@
+export { default as DsBreadcrumb } from './ds-breadcrumb';
+export * from './ds-breadcrumb.types';

package/src/components/ds-button/ds-button.tsx

@@ -0,0 +1,12 @@
+import { DsButtonLegacy } from './versions/ds-button-legacy';
+import { DsButtonNew } from './versions/ds-button-new';
+import type { DsButtonUnifiedProps } from './ds-button.types';
+
+const DsButton = (props: DsButtonUnifiedProps) => {
+	if (props.design === 'v1.2') {
+		return <DsButtonNew {...props} />;
+	}
+	return <DsButtonLegacy {...props} />;
+};
+
+export default DsButton;

package/src/components/ds-button/ds-button.types.ts

@@ -0,0 +1,6 @@
+import type { DsButtonProps as DsButtonLegacyProps } from './versions/ds-button-legacy/ds-button-legacy.types';
+import type { DsButtonProps as DsButtonNewProps } from './versions/ds-button-new/ds-button-new.types';
+
+export type DsButtonUnifiedProps =
+	| (DsButtonLegacyProps & { design?: undefined | 'legacy' })
+	| (DsButtonNewProps & { design: 'v1.2' });

package/src/components/ds-button/index.ts

@@ -0,0 +1,2 @@
+export { default as DsButton } from './ds-button';
+export * from './ds-button.types';