@vertesia/ui 0.64.0 → 0.66.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "0.64.0",
+  "version": "0.66.0",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -55,9 +55,10 @@
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.3.0",
     "ts-md5": "^1.3.1",
-    "@vertesia/json": "0.64.0",
-    "@vertesia/common": "0.64.0",
-    "@vertesia/client": "0.64.0"
+    "json-schema": "^0.4.0",
+    "@vertesia/client": "0.66.0",
+    "@vertesia/common": "0.66.0",
+    "@vertesia/json": "0.66.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.27.0",
@@ -68,6 +69,7 @@
     "@types/node": "^22.15.21",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.1",
+    "@types/json-schema": "^7.0.15",
     "eslint": "^9.27.0",
     "eslint-import-resolver-typescript": "^4.3.5",
     "eslint-plugin-import": "^2.31.0",

package/src/core/components/EmptyCollection.tsx

@@ -1,5 +1,5 @@
 import { Plus } from "lucide-react";
-import { Button } from "./Button.js";
+import { Button } from "@vertesia/ui/core";
 
 
 interface EmptyInteractionsProps {
@@ -10,29 +10,31 @@ interface EmptyInteractionsProps {
 }
 export function EmptyCollection({ buttonLabel, title, children, onClick }: EmptyInteractionsProps) {
     return (
-        <div className="text-center py-12">
-            <svg
-                className="mx-auto h-12 w-12 text-gray-400 dark:text-gray-200"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                aria-hidden="true"
-            >
-                <path
-                    vectorEffect="non-scaling-stroke"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"
-                />
-            </svg>
-            <h3 className="mt-2 text-sm font-semibold text-gray-500">{title}</h3>
-            <p className="mt-1 text-sm text-gray-500">{children}</p>
-            <div className="mt-6">
-                <Button onClick={onClick} size='lg'>
-                    <Plus className="-ml-0.5 mr-1.5 size-5" aria-hidden="true" />
-                    {buttonLabel}
-                </Button>
+        <div className="flex items-center justify-center h-full text-center">
+            <div className="py-12">
+                <svg
+                    className="mx-auto size-12"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    aria-hidden="true"
+                >
+                    <path
+                        vectorEffect="non-scaling-stroke"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"
+                    />
+                </svg>
+                <h3 className="mt-2 text-sm font-semibold">{title}</h3>
+                <p className="mt-1 text-sm text-muted">{children}</p>
+                <div className="mt-6">
+                    <Button onClick={onClick}>
+                        <Plus className="-ml-0.5 mr-1.5 size-5" aria-hidden="true" />
+                        {buttonLabel}
+                    </Button>
+                </div>
             </div>
         </div>
     )

package/src/core/components/InputList.tsx

@@ -12,8 +12,9 @@ interface InputListProps {
     allowSpaces?: boolean;
     delimiters?: string; // space and , by default
     placeholder?: string;
+    autoFocus?: boolean;
 }
-export function InputList({ value = [], onChange, className, delimiters = ", ", placeholder }: InputListProps) {
+export function InputList({ value = [], onChange, className, delimiters = ", ", placeholder, autoFocus }: InputListProps) {
     const [text, setText] = useState<string>('');
 
     const onBlur = (ev: any) => {
@@ -69,6 +70,7 @@ export function InputList({ value = [], onChange, className, delimiters = ", ",
                     onKeyDown={onKeyDown}
                     onChange={setText}
                     placeholder={!value || value.length === 0 ? placeholder : ''}
+                    autoFocus={autoFocus}
                 />
             </div>
         </div>

package/src/core/components/SidePanel.tsx

@@ -42,8 +42,8 @@ export function SidePanel({ isOpen, title, onClose, children }: SidePanelProps)
     return (
         <Transition show={isOpen} as={Fragment}>
             <Dialog as="div" className="relative z-10" onClose={onClose}>
-                <div className="fixed inset-0" />
-                <div className="fixed inset-0 overflow-hidden">
+                <div className="fixed inset-y-0 right-0" />
+                <div className="fixed inset-y-0 right-0 overflow-hidden">
                     <div className="absolute inset-0 overflow-hidden">
                         <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
                             <TransitionChild

package/src/core/components/Switch.tsx

@@ -12,12 +12,13 @@ interface SwitchProps {
     onChange: (value: boolean) => void;
     children?: React.ReactNode;
     className?: string;
+    disabled?: boolean;
 }
-export function Switch({ value, onChange, size = 'md', children, className }: SwitchProps) {
+export function Switch({ value, onChange, size = 'md', children, className, disabled }: SwitchProps) {
     const sizeClass = sizes[size];
     return (
-        <UISwitch checked={value} onChange={() => onChange(!value)} className={`flex items-center ${className} hover:cursor-pointer`}>
-            <div className={`${value ? 'bg-primary' : 'bg-muted'} relative inline-flex ${sizeClass[0]} items-center rounded-full`}>
+        <UISwitch checked={value} onChange={() => onChange(!value)} className={`flex items-center ${className} ${disabled ? 'cursor-not-allowed opacity-50' : 'hover:cursor-pointer'}`}>
+            <div className={`${value ? 'bg-primary' : 'bg-muted/50'} relative inline-flex ${sizeClass[0]} items-center rounded-full border-1`}>
                 <span
                     className={`${value ? sizeClass[2] : 'translate-x-1'
                         } inline-block ${sizeClass[1]} transform rounded-full bg-white transition`}

package/src/core/components/shadcn/calendar.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import DatePicker from "react-date-picker"
 

package/src/core/components/shadcn/checkbox.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { Check } from "lucide-react"

package/src/core/components/shadcn/command.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import { type DialogProps } from "@radix-ui/react-dialog"
 import { Command as CommandPrimitive } from "cmdk"

package/src/core/components/shadcn/dialog.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { cn } from "../libs/utils";

package/src/core/components/shadcn/filters/comboBox.tsx

@@ -11,6 +11,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 import { AnimateChangeInHeight } from "./animateChangeInHeight";
 import { FilterGroupOption, FilterOption } from "./types";
 import { DynamicLabel } from "./DynamicLabel";
+import { InputList } from "../../index";
 
 
 export const SelectionCombobox = ({
@@ -253,4 +254,76 @@ export const TextCombobox = ({
             </PopoverContent>
         </Popover>
     );
+};
+
+export const StringListCombobox = ({
+    filterType,
+    filterValues,
+    setFilterValues,
+}: {
+    filterType: string;
+    filterValues: string[];
+    setFilterValues: (values: string[]) => void;
+}) => {
+    const [open, setOpen] = useState(false);
+    const [tags, setTags] = useState<string[]>(filterValues);
+
+    const handleApply = () => {
+        setFilterValues(tags);
+        setOpen(false);
+    };
+
+    return (
+        <Popover
+            _open={open}
+            onOpenChange={(open) => {
+                setOpen(open);
+                if (!open && JSON.stringify(tags) !== JSON.stringify(filterValues)) {
+                    setTags(filterValues);
+                }
+            }}
+        >
+            <PopoverTrigger
+                className="rounded-none p-1 h-8 bg-muted hover:bg-muted/50 text-muted hover:text-primary shrink-0 transition"
+            >
+                <div className="flex gap-1.5 items-center">
+                    {filterValues.length > 0 ? (
+                        filterValues.length === 1 ? filterValues[0] : `${filterValues.length} tags`
+                    ) : (
+                        "Add tags..."
+                    )}
+                </div>
+            </PopoverTrigger>
+            <PopoverContent className="w-[300px] p-3">
+                <div className="flex flex-col gap-3">
+                    <div className="flex items-center p-1.5 text-xs text-muted">
+                        <span>{filterType}</span>
+                    </div>
+                    <InputList 
+                        value={tags} 
+                        onChange={setTags} 
+                        placeholder={`Add ${filterType.toLowerCase()}...`}
+                    />
+                    <div className="flex gap-2 justify-end">
+                        <Button
+                            size="sm" 
+                            variant="ghost"
+                            onClick={() => {
+                                setTags(filterValues);
+                                setOpen(false);
+                            }}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            size="sm" 
+                            onClick={handleApply}
+                        >
+                            Apply
+                        </Button>
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
 };

package/src/core/components/shadcn/filters/filterBar.tsx

@@ -1,6 +1,8 @@
 import React, { Dispatch, SetStateAction, useEffect } from "react";
 import { cn } from "../../libs/utils";
-import { Button, Popover, PopoverTrigger, PopoverContent, Command, CommandInput, CommandList, CommandGroup, CommandItem, CommandEmpty } from "../index";
+import { Button } from "../button";
+import { Popover, PopoverTrigger, PopoverContent } from "../popover";
+import { Command, CommandInput, CommandList, CommandGroup, CommandItem, CommandEmpty } from "../command";
 import { ListFilter } from "lucide-react";
 
 import { Filter, FilterGroup } from "./types";
@@ -9,6 +11,7 @@ import Filters from "./filters";
 import TextFilter from "./textFilter";
 import DateFilter from "./dateFilter";
 import SelectFilter from "./selectFilter";
+import StringListFilter from "./stringListFilter";
 
 interface FilterBarProps {
   filters: Filter[];
@@ -39,13 +42,16 @@ export function FilterBar({ filters, setFilters, filterGroups }: FilterBarProps)
             return filter.name === group.name;
           }
           return filter.name === group.name &&
-            filter.value.some(val => val.value === option.value);
+            (Array.isArray(filter.value) && typeof filter.value[0] === 'string' 
+              ? filter.value.some(val => val === option.value)
+              : filter.value.some(val => (val as any).value === option.value));
         })
       )
     })).filter(group =>
       ((group.options ?? []).length > 0) ||
       (group.type === "date" && !filters.some(filter => filter.name === group.name)) ||
-      (group.type === "text" && !filters.some(filter => filter.name === group.name))
+      (group.type === "text" && !filters.some(filter => filter.name === group.name)) ||
+      (group.type === "stringList" && !filters.some(filter => filter.name === group.name))
     );
 
     if (options.length === 0) {
@@ -127,6 +133,15 @@ export function FilterBar({ filters, setFilters, filterGroups }: FilterBarProps)
             filterGroups={filterGroups}
           />
         );
+      case "stringList":
+        return (
+          <StringListFilter
+            selectedView={selectedView}
+            setFilters={setFilters}
+            handleClose={handleClose}
+            filterGroups={filterGroups}
+          />
+        );
       default:
         return (
           <SelectFilter
@@ -148,9 +163,16 @@ export function FilterBar({ filters, setFilters, filterGroups }: FilterBarProps)
       if (filters.length > 0) {
         // Convert filters to simple format with URL-safe encoding: filterName:value,value;filterName2:value
         const filterString = filters.map(filter => {
-          const values = Array.isArray(filter.value) 
-            ? filter.value.map(item => encodeURIComponent(item.value || '')).join(',')
-            : encodeURIComponent(filter.value || '');
+          let values;
+          if (filter.type === 'stringList' && Array.isArray(filter.value) && typeof filter.value[0] === 'string') {
+            // Handle stringList with direct string array
+            values = (filter.value as string[]).map(item => encodeURIComponent(item)).join(',');
+          } else if (Array.isArray(filter.value)) {
+            // Handle other types with FilterOption array
+            values = filter.value.map((item: any) => encodeURIComponent(item.value || '')).join(',');
+          } else {
+            values = encodeURIComponent(filter.value || '');
+          }
           return `${encodeURIComponent(filter.name)}:${values}`;
         }).join(';');
         params.set('filters', filterString);
@@ -177,13 +199,17 @@ export function FilterBar({ filters, setFilters, filterGroups }: FilterBarProps)
           const values = valuesString.split(',').map(encodedValue => decodeURIComponent(encodedValue));
           
           const group = filterGroups.find(g => g.name === name);
-          console.log("group", group);
+          let filterValue;
           
-          const filterOptions = values.map(value => {
-            if (group?.type === 'text') {
-              return { value, label: value };
-            } else {
-              // Try to find option with label, or use labelRenderer, or fallback to value
+          if (group?.type === 'stringList') {
+            // For stringList, return direct string array
+            filterValue = values;
+          } else if (group?.type === 'text') {
+            // For text, return FilterOption array
+            filterValue = values.map(value => ({ value, label: value }));
+          } else {
+            // For other types, find options with labels
+            filterValue = values.map(value => {
               const matchingOption = group?.options?.find(opt => opt.value === value);
               let label = value;
               
@@ -199,16 +225,14 @@ export function FilterBar({ filters, setFilters, filterGroups }: FilterBarProps)
                 value,
                 label
               };
-            }
-          });
-          
-          console.log("valuesWithLabels", filterOptions);
+            });
+          }
           
           return {
             name,
             type: group?.type || 'select',
             placeholder: group?.placeholder,
-            value: filterOptions
+            value: filterValue
           };
         });
 

package/src/core/components/shadcn/filters/filters.tsx

@@ -2,8 +2,8 @@ import { X } from "lucide-react";
 import { Dispatch, SetStateAction } from "react";
 import { Button } from "../button";
 
-import { DateCombobox, SelectionCombobox, TextCombobox } from "./comboBox";
-import { Filter, FilterGroup } from "./types";
+import { DateCombobox, SelectionCombobox, TextCombobox, StringListCombobox } from "./comboBox";
+import { Filter, FilterGroup, FilterOption } from "./types";
 import dayjs from "dayjs";
 
 interface FiltersProps {
@@ -21,7 +21,7 @@ function generateComboboxOptions(
         case "date":
             return (
                 <DateCombobox
-                    filterValues={filter.value.map(v => v.value || '')}
+                    filterValues={Array.isArray(filter.value) && typeof filter.value[0] === 'object' ? filter.value.map((v: any) => v.value || '') : []}
                     setFilterValues={(filterValues) => {
                         setFilters((prev) =>
                             prev.map((f) =>
@@ -41,20 +41,36 @@ function generateComboboxOptions(
             return (
                 <TextCombobox
                     filterType={filter.placeholder || filter.name}
-                    filterValue={filter.value[0]?.value || ""}
+                    filterValue={Array.isArray(filter.value) && filter.value[0] && typeof filter.value[0] === 'object' ? filter.value[0].value || "" : ""}
                     setFilterValue={(textValue) => {
                         setFilters((prev) =>
                             prev.map((f) =>
                                 f === filter
                                     ? {
-                                          ...f,
-                                          value: [
-                                              {
-                                                  value: textValue,
-                                                  label: textValue,
-                                              },
-                                          ],
-                                      }
+                                        ...f,
+                                        value: [
+                                            {
+                                                value: textValue,
+                                                label: textValue,
+                                            },
+                                        ],
+                                    }
+                                    : f,
+                            ),
+                        );
+                    }}
+                />
+            );
+        case "stringList":
+            return (
+                <StringListCombobox
+                    filterType={filter.placeholder || filter.name}
+                    filterValues={Array.isArray(filter.value) && typeof filter.value[0] === 'string' ? filter.value as string[] : []}
+                    setFilterValues={(values) => {
+                        setFilters((prev) =>
+                            prev.map((f) =>
+                                f === filter
+                                    ? { ...f, value: values }
                                     : f,
                             ),
                         );
@@ -67,7 +83,7 @@ function generateComboboxOptions(
             return (
                 <SelectionCombobox
                     filterType={filter.placeholder || filter.name}
-                    filterValues={filter.value}
+                    filterValues={Array.isArray(filter.value) && typeof filter.value[0] === 'object' ? filter.value as FilterOption[] : []}
                     setFilterValues={(filterValues) => {
                         setFilters((prev) =>
                             prev.map((f) =>
@@ -95,7 +111,7 @@ export default function Filters({
             {filters
                 .filter((filter) => filter.value?.length > 0)
                 .map((filter) => (
-                    <div className="flex gap-[1px] items-center text-sm" key={filter.name + '-' + (filter.type == 'date' ? 'date' : filter.value.map(v => v.value).join(','))}>
+                    <div className="flex gap-[1px] items-center text-sm" key={filter.name + '-' + (filter.type == 'date' ? 'date' : filter.type === 'stringList' && typeof filter.value[0] === 'string' ? (filter.value as string[]).join(',') : Array.isArray(filter.value) ? filter.value.map((v: any) => v.value).join(',') : '')}>
                         <div className="flex gap-1.5 shrink-0 rounded-l bg-muted p-1.5 h-8 items-center">
                             {filter.placeholder || filter.name}
                         </div>

package/src/core/components/shadcn/filters/selectFilter.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { CommandItem, CommandEmpty } from "../index";
-import { Filter, FilterGroup, FilterGroupOption } from "./types";
+import { CommandItem, CommandEmpty } from "../command";
+import { Filter, FilterGroup, FilterGroupOption, FilterOption } from "./types";
 import { DynamicLabel } from "./DynamicLabel";
 
 interface SelectFilterProps {
@@ -81,7 +81,7 @@ export default function SelectFilter({
                     const updatedFilters = [...prev];
                     updatedFilters[existingFilterIndex] = {
                       ...updatedFilters[existingFilterIndex],
-                      value: [...updatedFilters[existingFilterIndex].value, filterOption]
+                      value: [...(updatedFilters[existingFilterIndex].value as FilterOption[]), filterOption]
                     };
                     return updatedFilters;
                   } else {

package/src/core/components/shadcn/filters/stringListFilter.tsx

@@ -0,0 +1,58 @@
+import { Dispatch, SetStateAction, useState } from "react";
+import { InputList } from "../../index";
+import { Button } from "../button";
+import { Filter, FilterGroup } from "./types";
+
+interface StringListFilterProps {
+  selectedView: string;
+  setFilters: Dispatch<SetStateAction<Filter[]>>;
+  handleClose: () => void;
+  filterGroups: FilterGroup[];
+}
+
+export default function StringListFilter({
+  selectedView,
+  setFilters,
+  handleClose,
+  filterGroups,
+}: StringListFilterProps) {
+  const [tags, setTags] = useState<string[]>([]);
+  
+  const selectedGroup = filterGroups.find(g => g.name === selectedView);
+
+  const handleApply = () => {
+    if (tags.length > 0) {
+      setFilters(prev => [
+        ...prev.filter(f => f.name !== selectedView),
+        {
+          name: selectedView,
+          placeholder: selectedGroup?.placeholder,
+          value: tags,
+          type: "stringList" as const
+        }
+      ]);
+    }
+    handleClose();
+  };
+
+  return (
+    <div className="p-2 space-y-3">
+      <div className="space-y-2">
+        <InputList 
+          value={tags} 
+          onChange={setTags} 
+          placeholder={selectedGroup?.placeholder || `Add ${selectedView}...`}
+          autoFocus
+        />
+      </div>
+      <div className="flex gap-2 justify-end">
+        <Button variant="ghost" size="sm" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button size="sm" onClick={handleApply} disabled={tags.length === 0}>
+          Apply
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/core/components/shadcn/filters/textFilter.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { Button, Input } from "../index";
+import { Button } from "../button";
+import { Input } from "../input";
 import { Filter, FilterGroup } from "./types";
 
 interface TextFilterProps {

package/src/core/components/shadcn/filters/types.ts

@@ -12,7 +12,7 @@ export interface FilterGroupOption {
 export interface FilterGroup {
   name: string;
   placeholder?: string;
-  type?: "select" | "date" | "text";
+  type?: "select" | "date" | "text" | "stringList";
   options?: FilterGroupOption[];
   allowCreate?: boolean;
   filterBy?: (value: string, searchText: string) => boolean;
@@ -22,8 +22,8 @@ export interface FilterGroup {
 export interface Filter {
   name: string;
   placeholder?: string;
-  value: FilterOption[];
-  type?: "select" | "date" | "text";
+  value: FilterOption[] | string[];
+  type?: "select" | "date" | "text" | "stringList";
 }
 
 export enum FilterOperator {

package/src/core/components/shadcn/label.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { cva, type VariantProps } from "class-variance-authority"

package/src/core/components/shadcn/selectBox.tsx

@@ -179,7 +179,7 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                         className,
                         border && 'border border-border',
                         'flex flex-row gap-2 items-center justify-between p-2 rounded-md group relative',
-                        !disabled && "cursor-pointer hover:bg-muted"
+                        !disabled ? "cursor-pointer hover:bg-muted" : "cursor-not-allowed text-muted",
                     )}
                 >
                     <div

package/src/env/index.ts

@@ -64,8 +64,12 @@ export class VertesiaEnvironment implements Readonly<EnvProps> {
         return this.type === "production";
     }
 
+    get isStable() {
+        return this.type === "production" || this.type === "preview" || this.type === "dr";
+    }
+
     get isDev() {
-        return !this.isProd;
+        return !this.isStable;
     }
 
     get isPreview() {