@oneplatformdev/ui 0.1.0-5 → 0.1.0-8

package/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

package/.storybook/main.ts

@@ -0,0 +1,48 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import { mergeConfig } from 'vite';
+import * as path from 'node:path';
+
+const rootPath = path.resolve(__dirname, '../../');
+
+const utilsPath = path.resolve(rootPath, 'utils', 'src');
+const uiPath = path.resolve(rootPath, 'ui', 'src');
+const hooksPath = path.resolve(rootPath, 'hooks', 'src');
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
+  addons: ['@storybook/addon-essentials'],
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          '@oneplatformdev/utils': utilsPath,
+          '@oneplatformdev/utils/*': `${utilsPath}/*`,
+          '@oneplatformdev/ui': uiPath,
+          '@oneplatformdev/ui/*': `${uiPath}/*`,
+          '@oneplatformdev/hooks': hooksPath,
+          '@oneplatformdev/hooks/*': `${hooksPath}/*`,
+        },
+      },
+    });
+  },
+  docs: {
+    defaultName: 'Documentation',
+  },
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      builder: {
+        viteConfigPath: 'vite.config.ts',
+      },
+    },
+  },
+  core: {
+    builder: '@storybook/builder-vite'
+  },
+};
+
+export default config;
+
+// To customize your Vite configuration you can use the viteFinal field.
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/recipes/storybook/custom-builder-configs

package/.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import { themes } from '@storybook/theming';
+
+addons.setConfig({
+  theme: themes.dark,
+});

package/.storybook/preview.ts

@@ -0,0 +1,29 @@
+import '../src/global.css';
+import { Preview } from '@storybook/react';
+
+import { withThemeByClassName } from '@storybook/addon-themes';
+
+export const decorators = [
+  withThemeByClassName({
+    themes: {
+      light: 'light',
+      dark: 'dark',
+    },
+    defaultTheme: 'light',
+  }),
+];
+
+const preview: Preview = {
+  tags: ['autodocs'],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    actions: { argTypesRegex: '^on.*' },
+  }
+};
+
+export default preview;

package/CHANGELOG.md

@@ -0,0 +1,38 @@
+## 0.1.0-8 (2025-09-11)
+
+### 🧱 Updated Dependencies
+
+- Updated @oneplatformdev/utils to 0.1.1-34
+- Updated @oneplatformdev/hooks to 0.1.0-9
+
+## 0.1.0-6 (2025-09-11)
+
+### 🧱 Updated Dependencies
+
+- Updated @oneplatformdev/utils to 0.1.1-32
+- Updated @oneplatformdev/hooks to 0.1.0-8
+
+## 0.1.0-5 (2025-09-11)
+
+### 🧱 Updated Dependencies
+
+- Updated @oneplatformdev/utils to 0.1.1-28
+- Updated @oneplatformdev/hooks to 0.1.0-7
+
+## 0.1.0-4 (2025-09-11)
+
+This was a version bump only for @oneplatformdev/ui to align it with other projects, there were no code changes.
+
+## 0.1.0-3 (2025-09-11)
+
+### 🧱 Updated Dependencies
+
+- Updated @oneplatformdev/hooks to 0.1.0-5
+- Updated @oneplatformdev/utils to 0.1.1-26
+
+## 0.1.0-2 (2025-09-11)
+
+### 🧱 Updated Dependencies
+
+- Updated @oneplatformdev/hooks to 0.1.0-4
+- Updated @oneplatformdev/utils to 0.1.1-25

package/dist/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 0.1.0-6 (2025-09-11)
+
+### 🧱 Updated Dependencies
+
+- Updated @oneplatformdev/utils to 0.1.1-32
+- Updated @oneplatformdev/hooks to 0.1.0-8
+
+## 0.1.0-5 (2025-09-11)
+
+### 🧱 Updated Dependencies
+
+- Updated @oneplatformdev/utils to 0.1.1-28
+- Updated @oneplatformdev/hooks to 0.1.0-7
+
 ## 0.1.0-4 (2025-09-11)
 
 This was a version bump only for @oneplatformdev/ui to align it with other projects, there were no code changes.

package/dist/index.js

@@ -1,17 +1,18 @@
-import { Button as r } from "./Button/Button.js";
+/* empty css           */
+import { Button as p } from "./Button/Button.js";
 import { buttonVariants as n } from "./Button/buttonVariants.js";
-import { ButtonIcon as i } from "./ButtonIcon/ButtonIcon.js";
-import { buttonIconVariants as m } from "./ButtonIcon/buttonIconVariants.js";
-import { TooltipContent as T, TooltipProvider as l, TooltipRoot as a, TooltipTrigger as u } from "./Tooltip/TooltipRoot.js";
-import { Tooltip as c } from "./Tooltip/Tooltip.js";
+import { ButtonIcon as m } from "./ButtonIcon/ButtonIcon.js";
+import { buttonIconVariants as x } from "./ButtonIcon/buttonIconVariants.js";
+import { TooltipContent as l, TooltipProvider as a, TooltipRoot as u, TooltipTrigger as b } from "./Tooltip/TooltipRoot.js";
+import { Tooltip as g } from "./Tooltip/Tooltip.js";
 export {
-  r as Button,
-  i as ButtonIcon,
-  c as Tooltip,
-  T as TooltipContent,
-  l as TooltipProvider,
-  a as TooltipRoot,
-  u as TooltipTrigger,
-  m as buttonIconVariants,
+  p as Button,
+  m as ButtonIcon,
+  g as Tooltip,
+  l as TooltipContent,
+  a as TooltipProvider,
+  u as TooltipRoot,
+  b as TooltipTrigger,
+  x as buttonIconVariants,
   n as buttonVariants
 };

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneplatformdev/ui",
-  "version": "0.1.0-4",
+  "version": "0.1.0-7",
   "description": "React hook library",
   "author": "One Platform Development Team",
   "keywords": [
@@ -43,6 +43,7 @@
     }
   },
   "files": [
+    "**/*",
     "dist",
     "package.json",
     "README.md",

package/external.ts

@@ -0,0 +1,78 @@
+const baseExternal = [
+  'path',
+  'react',
+  'react-dom',
+  'react/jsx-runtime',
+  'jsx-runtime',
+  'react-jsx',
+  'postcss',
+  'autoprefixer',
+  'react',
+  'react-dom',
+  'tailwindcss',
+  'tw-animate-css',
+  'tailwind-merge',
+  'lucide-react',
+  '@tailwindcss/vite',
+  'clsx',
+  'class-variance-authority',
+  '@oneplatformdev/utils',
+  '@oneplatformdev/hooks',
+  '@oneplatformdev/tokens',
+]
+
+const radixPackExternal = [
+  "@radix-ui/react-accordion",
+  "@radix-ui/react-alert-dialog",
+  "@radix-ui/react-aspect-ratio",
+  "@radix-ui/react-avatar",
+  "@radix-ui/react-checkbox",
+  "@radix-ui/react-collapsible",
+  "@radix-ui/react-dialog",
+  "@radix-ui/react-dropdown-menu",
+  "@radix-ui/react-hover-card",
+  "@radix-ui/react-label",
+  "@radix-ui/react-menubar",
+  "@radix-ui/react-navigation-menu",
+  "@radix-ui/react-popover",
+  "@radix-ui/react-progress",
+  "@radix-ui/react-radio-group",
+  "@radix-ui/react-scroll-area",
+  "@radix-ui/react-select",
+  "@radix-ui/react-separator",
+  "@radix-ui/react-slider",
+  "@radix-ui/react-slot",
+  "@radix-ui/react-switch",
+  "@radix-ui/react-tabs",
+  "@radix-ui/react-toast",
+  "@radix-ui/react-toggle",
+  "@radix-ui/react-toggle-group",
+  "@radix-ui/react-tooltip",
+]
+
+
+const packExternal = [
+  'lucide-react',
+  'class-variance-authority',
+  '@hookform/resolvers',
+  'cmdk',
+  'date-fns',
+  'embla-carousel-react',
+  'input-otp',
+  'next-themes',
+  'react-day-picker',
+  'react-hook-form',
+  'react-resizable-panels',
+  'recharts',
+  'sonner',
+  'vaul',
+  "@tanstack/react-table",
+  'react-dropzone',
+  'react-textarea-autosize',
+]
+
+export const external = [
+  ...baseExternal,
+  ...radixPackExternal,
+  ...packExternal,
+]

package/kit/MultiSelectCombobox/MultiSelectCombobox.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import { Check, ChevronsUpDown, X } from 'lucide-react';
+import { FC, useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { useDebounce } from "@/hooks/useDebounce.ts";
+import { IOption, MultiSelectComboboxProps } from "./types.ts";
+
+import { cn } from "@/lib/utils";
+import { NLTProgress } from "@/UIKit/components/NLTProgress/nlt-progress.tsx";
+import { Badge } from "@/UIKit/shadcn/badge.tsx";
+import { Button } from "@/UIKit/shadcn/button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "@/UIKit/shadcn/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/UIKit/shadcn/popover";
+
+export const MultiSelectCombobox: FC<MultiSelectComboboxProps> = (props) => {
+	const {
+		values = [],
+		options: initialOptions = [],
+		onChange,
+		fetchOptions,
+		disabled,
+		placeholder,
+		searchLabel,
+		notFoundLabel,
+		onMount,
+	} = props;
+	const { t } = useTranslation('common');
+	const isMounted = useRef(false);
+	const [ open, setOpen ] = useState(false);
+	const [ loading, setLoading ] = useState(false);
+	const [ searchTerm, setSearchTerm ] = useState("");
+	const [ options, setOptions ] = useState<IOption[]>(initialOptions);
+
+	const [ selected, setSelected ] = useState<IOption[]>([]);
+
+	const onChangeOption = useCallback((nextOptions: IOption[]) => {
+		onChange?.(nextOptions.map(o => o.value));
+		setSelected(nextOptions);
+	}, [onChange]);
+
+	const handleSelect = useCallback((option: IOption) => {
+		const next = selected.some((o) => o.value === option.value)
+			? selected.filter((o) => o.value !== option.value)
+			: [ ...selected, option ];
+		onChangeOption(next);
+	}, [selected, onChangeOption]);
+
+	const handleRemove = useCallback((option: IOption) => {
+		const next = selected.filter(o => o.value !== option.value);
+		onChangeOption?.(next);
+	}, [selected, onChangeOption]);
+
+	const getIsSelected = useCallback((option: IOption) => {
+		return values.includes(option.value) || selected?.some((o) => o.value === option.value);
+	}, [selected, values]);
+
+	const getData = async (search?: string) => {
+		setLoading(true);
+		try {
+			const fetchedOptions = await fetchOptions(search);
+			setOptions(fetchedOptions);
+		} catch (error) {
+			console.error("Option load failed:", error);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const handlePopoverOpen = async () => {
+		if (!open) {
+			getData();
+			setSearchTerm('');
+		}
+	};
+
+	const { debouncedWrapper } = useDebounce(getData, 1000);
+	const handleSearchChange = (value: string) => {
+		setSearchTerm(value);
+		debouncedWrapper(value);
+	};
+
+	const mount = useCallback(() => {
+		if(!onMount) {
+			isMounted.current = true;
+			return;
+		}
+		onMount({ setSelected })
+			.finally(() => {
+				isMounted.current = true;
+			});
+	}, [onMount]);
+
+	useEffect(() => {
+		mount();
+		return () => {
+			isMounted.current = false;
+		};
+	}, []);
+
+	return (
+		<div className="w-full">
+			<Popover
+				open={open}
+				onOpenChange={(newOpen) => {
+					setOpen(newOpen);
+					if (newOpen) handlePopoverOpen();
+				}}
+			>
+				<PopoverTrigger asChild className="border-border">
+					<Button
+						variant="outline"
+						role="combobox"
+						aria-expanded={open}
+						className={cn(
+							"flex w-full items-center justify-start h-auto min-h-[36px] border",
+							open ? "border-2 border-sidebar-accent" : "border-border",
+						)}
+						disabled={!isMounted.current || disabled}
+					>
+						<>
+							{!isMounted.current && <NLTProgress className="w-6 h-6 text-primary" />}
+							{isMounted.current && selected?.length
+							? (
+								<div className="flex flex-wrap gap-2">
+									{selected.map((opt) => (
+										<Badge
+											key={opt.value}
+											variant="secondary"
+											className='m-0 w-auto h-auto min-h-0 items-center'
+										>
+											<span>{opt.label}</span>
+											<Button
+												variant="ghost"
+												size="icon"
+												className="p-0 text-muted-foreground hover:bg-transparent h-4 w-4"
+												onClick={(e) => {
+													e?.preventDefault();
+													e?.stopPropagation();
+													handleRemove(opt);
+												}}
+											>
+												<X className="h-3 w-3" />
+											</Button>
+										</Badge>
+									))}
+								</div>
+							)
+							: (
+								<div className='flex items-center justify-between w-full'>
+									{placeholder}
+									<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50"/>
+								</div>
+							)}
+						</>
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent
+					className="w-(--radix-popper-anchor-width) max-w-none p-0"
+					align="start"
+				>
+					<Command shouldFilter={false}>
+						<CommandInput
+							placeholder={searchLabel}
+							value={searchTerm}
+							onValueChange={handleSearchChange}
+						/>
+						<CommandList>
+							{!loading && <CommandEmpty>{notFoundLabel || t('foundNothing')}</CommandEmpty>}
+							<CommandGroup>
+								{loading ? (
+									<div className="flex justify-center"><NLTProgress
+										className="w-6 h-6 text-primary"/></div>
+								) : (
+									options?.map((option) => (
+											<CommandItem
+												key={option.value}
+												value={option.value}
+												onSelect={() => {
+													handleSelect(option);
+												}}
+											>
+												{option.label}
+												<Check
+													className={cn(
+														"ml-auto",
+														getIsSelected(option) ? "opacity-100" : "opacity-0"
+													)}
+												/>
+											</CommandItem>
+										)
+									)
+								)}
+							</CommandGroup>
+						</CommandList>
+					</Command>
+				</PopoverContent>
+
+			</Popover>
+		</div>
+	);
+};
+

package/kit/MultiSelectCombobox/index.tsx

@@ -0,0 +1,2 @@
+export { MultiSelectCombobox } from './MultiSelectCombobox.tsx';
+export type * from './types.ts';

package/kit/MultiSelectCombobox/types.ts

@@ -0,0 +1,22 @@
+import { Dispatch, SetStateAction } from "react";
+
+export interface IOption {
+	value: string;
+	label: string;
+}
+
+export interface MultiSelectComboboxPropsOnMountParams {
+	setSelected:  Dispatch<SetStateAction<IOption[]>>
+}
+
+export interface MultiSelectComboboxProps {
+	values?: IOption["value"][];
+	options?: IOption[];
+	onChange?: (options?: IOption["value"][]) => void;
+	fetchOptions: (search?: string) => Promise<IOption[]>;
+	disabled?: boolean;
+	placeholder?: string;
+	searchLabel?: string;
+	notFoundLabel?: string;
+	onMount?: (params: MultiSelectComboboxPropsOnMountParams) => Promise<void>;
+}

package/kit/NLTDateRangePicker/index.tsx

@@ -0,0 +1,85 @@
+import { endOfDay, format, startOfDay } from 'date-fns';
+import { CalendarIcon } from 'lucide-react';
+import React, { FC, useState } from 'react';
+import { DateRange } from 'react-day-picker';
+
+import { useWindowSize } from '@/hooks/useWindowSize';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/UIKit/shadcn/button';
+import { Calendar } from '@/UIKit/shadcn/calendar';
+import { Popover, PopoverContent, PopoverTrigger } from '@/UIKit/shadcn/popover';
+
+export type DateRangePickerProps = React.HTMLAttributes<HTMLDivElement> & {
+    range: DateRange | undefined,
+    onRangeChange: (range: DateRange | undefined) => void,
+}
+
+export const DateRangePicker: FC<DateRangePickerProps> = ({ range, onRangeChange, className, }) => {
+    const { isMobile } = useWindowSize();
+    const [isOpen, setIsOpen] = useState(false);
+    const [pickerRange, setPickerRange] = useState<DateRange | undefined>(range);
+
+    const onOpenChange = (open: boolean) => {
+        if (open) {
+            setIsOpen(true);
+        } else {
+            setIsOpen(false);
+        }
+    };
+
+    const closePicker = () => {
+        setIsOpen(false);
+    };
+
+    const onSubmitPicker = () => {
+        onRangeChange(pickerRange as DateRange);
+        closePicker();
+    };
+
+    const handleRangeChange = (range: DateRange | undefined) => {
+        if (range) {
+            const adjustedRange = {
+                from: range.from ? startOfDay(range.from) : undefined,
+                to: range.to ? endOfDay(range.to) : undefined,
+            };
+            setPickerRange(adjustedRange);
+        } else {
+            setPickerRange(undefined);
+        }
+    };
+
+    return (
+        <div className={cn('grid gap-2', className)}>
+            <Popover open={isOpen} onOpenChange={onOpenChange}>
+                <PopoverTrigger asChild>
+                    <Button id="date" variant="outline" className={'w-[50px] sm:w-[220px] h-[40px] justify-start text-left font-normal'}>
+                        <CalendarIcon className="sm:mr-2 h-4 w-4" />
+                        {isMobile ? null : range?.from ? (
+                            range.to
+                                ? (<>{format(range.from, 'LLL dd, y')}{' '}-{' '}{format(range.to, 'LLL dd, y')}</>)
+                                : (format(range.from, 'LLL dd, y'))
+                        ) : (<span>Pick a date</span>)}
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="end">
+                    <Calendar
+                        // initialFocus
+                        mode="range"
+                        selected={pickerRange}
+                        onSelect={handleRangeChange}
+                        numberOfMonths={2}
+                    />
+                    {!!pickerRange && (
+                        <div className="px-5 pb-4 flex justify-end">
+                            <Button disabled={!range?.from || !range?.to} onClick={onSubmitPicker}>
+                                Apply
+                            </Button>
+                        </div>
+                    )}
+                </PopoverContent>
+            </Popover>
+        </div>
+    );
+};
+