@showwhat/configurator 1.0.1 → 2.1.0

package/README.md

@@ -1,6 +1,8 @@
 # @showwhat/configurator
 
-A reusable React component library for visually editing showwhat feature flag definitions. Provides a complete rule-builder UI — bring your own store and persistence.
+A reusable React component library for visually editing showwhat definitions — like Swagger UI for your flag and config rules.
+
+Provides a complete rule-builder UI while letting your app own storage, workflow, and persistence.
 
 ## Installation
 

package/dist/index.d.ts

@@ -3,9 +3,17 @@ import { ClassValue } from 'clsx';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default, { Component, ReactNode, ErrorInfo, ComponentType } from 'react';
-import { Select as Select$1, Separator as Separator$1, ScrollArea as ScrollArea$1, Dialog as Dialog$1, DropdownMenu as DropdownMenu$1, Label as Label$1, Switch as Switch$1, Popover as Popover$1, Tabs as Tabs$1 } from 'radix-ui';
+import { Select as Select$1 } from '@base-ui/react/select';
+import { Separator as Separator$1 } from '@base-ui/react/separator';
+import { ScrollArea as ScrollArea$1 } from '@base-ui/react/scroll-area';
+import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
+import { Menu as Menu$1 } from '@base-ui/react/menu';
+import { Switch as Switch$1 } from '@base-ui/react/switch';
+import { Popover as Popover$1 } from '@base-ui/react/popover';
+import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
 
 type DefinitionListProps = {
+    keys: string[];
     definitions: Definitions;
     selectedKey: string | null;
     validationErrors?: Record<string, unknown[]>;
@@ -16,8 +24,8 @@ type DefinitionListProps = {
 };
 type DefinitionListItemProps = {
     definitionKey: string;
-    variationCount: number;
-    isActive: boolean;
+    variationCount?: number;
+    isActive?: boolean;
     hasErrors: boolean;
     isSelected: boolean;
     isDirty?: boolean;
@@ -34,6 +42,9 @@ type DefinitionEditorProps = {
     onRename: (newKey: string) => void | Promise<void>;
     onSave?: () => void;
     onDiscard?: () => void;
+    onRemove?: () => void;
+    onExport?: (format: "yaml" | "json") => void;
+    onRefresh?: () => void;
 };
 type VariationListProps = {
     variations: Variation[];
@@ -63,7 +74,7 @@ type ConditionBlockProps = {
     errors?: ValidationIssueDisplay[];
 };
 type ConditionGroupProps = {
-    type: "and" | "or";
+    type: "and" | "or" | "checkAnnotations";
     conditions: Condition[];
     onChange: (conditions: Condition[]) => void;
     onRemove: () => void;
@@ -84,6 +95,7 @@ type ValueInputProps = {
 type DateTimeInputProps = {
     value: string;
     onChange: (value: string) => void;
+    disabled?: boolean;
 };
 type ValidationIssueDisplay = {
     path: (string | number)[];
@@ -138,10 +150,9 @@ declare function buttonVariants(opts?: {
     size?: ButtonSize;
     className?: string;
 }): string;
-declare function Button({ className, variant, size, asChild, ref, ...props }: React__default.ComponentProps<"button"> & {
+declare function Button({ className, variant, size, ref, ...props }: React__default.ComponentProps<"button"> & {
     variant?: ButtonVariant;
     size?: ButtonSize;
-    asChild?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
 declare function Input({ className, type, ...props }: React__default.ComponentProps<"input">): react_jsx_runtime.JSX.Element;
@@ -152,8 +163,8 @@ declare function SelectValue({ ...props }: React__default.ComponentProps<typeof
 declare function SelectTrigger({ className, size, children, ...props }: React__default.ComponentProps<typeof Select$1.Trigger> & {
     size?: "sm" | "default";
 }): react_jsx_runtime.JSX.Element;
-declare function SelectContent({ className, children, position, align, ...props }: React__default.ComponentProps<typeof Select$1.Content>): react_jsx_runtime.JSX.Element;
-declare function SelectLabel({ className, ...props }: React__default.ComponentProps<typeof Select$1.Label>): react_jsx_runtime.JSX.Element;
+declare function SelectContent({ className, children, ...props }: React__default.ComponentProps<typeof Select$1.Popup>): react_jsx_runtime.JSX.Element;
+declare function SelectLabel({ className, ...props }: React__default.ComponentProps<typeof Select$1.GroupLabel>): react_jsx_runtime.JSX.Element;
 declare function SelectItem({ className, children, ...props }: React__default.ComponentProps<typeof Select$1.Item>): react_jsx_runtime.JSX.Element;
 declare function SelectSeparator({ className, ...props }: React__default.ComponentProps<typeof Select$1.Separator>): react_jsx_runtime.JSX.Element;
 
@@ -170,20 +181,21 @@ declare function badgeVariants(opts?: {
     variant?: BadgeVariant;
     className?: string;
 }): string;
-declare function Badge({ className, variant, asChild, ...props }: React__default.ComponentProps<"span"> & {
+declare function Badge({ className, variant, ...props }: React__default.ComponentProps<"span"> & {
     variant?: BadgeVariant;
-    asChild?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
-declare function Separator({ className, orientation, decorative, ...props }: React__default.ComponentProps<typeof Separator$1.Root>): react_jsx_runtime.JSX.Element;
+declare function Separator({ className, orientation, ...props }: React__default.ComponentProps<typeof Separator$1> & {
+    decorative?: boolean;
+}): react_jsx_runtime.JSX.Element;
 
 declare function ScrollArea({ className, children, ...props }: React__default.ComponentProps<typeof ScrollArea$1.Root>): react_jsx_runtime.JSX.Element;
-declare function ScrollBar({ className, orientation, ...props }: React__default.ComponentProps<typeof ScrollArea$1.ScrollAreaScrollbar>): react_jsx_runtime.JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: React__default.ComponentProps<typeof ScrollArea$1.Scrollbar>): react_jsx_runtime.JSX.Element;
 
 declare function Dialog({ ...props }: React__default.ComponentProps<typeof Dialog$1.Root>): react_jsx_runtime.JSX.Element;
 declare function DialogTrigger({ ...props }: React__default.ComponentProps<typeof Dialog$1.Trigger>): react_jsx_runtime.JSX.Element;
 declare function DialogClose({ ...props }: React__default.ComponentProps<typeof Dialog$1.Close>): react_jsx_runtime.JSX.Element;
-declare function DialogContent({ className, children, showCloseButton, ...props }: React__default.ComponentProps<typeof Dialog$1.Content> & {
+declare function DialogContent({ className, children, showCloseButton, ...props }: React__default.ComponentProps<typeof Dialog$1.Popup> & {
     showCloseButton?: boolean;
 }): react_jsx_runtime.JSX.Element;
 declare function DialogHeader({ className, ...props }: React__default.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
@@ -193,33 +205,39 @@ declare function DialogFooter({ className, showCloseButton, children, ...props }
 declare function DialogTitle({ className, ...props }: React__default.ComponentProps<typeof Dialog$1.Title>): react_jsx_runtime.JSX.Element;
 declare function DialogDescription({ className, ...props }: React__default.ComponentProps<typeof Dialog$1.Description>): react_jsx_runtime.JSX.Element;
 
-declare function DropdownMenu({ ...props }: React__default.ComponentProps<typeof DropdownMenu$1.Root>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuTrigger({ ...props }: React__default.ComponentProps<typeof DropdownMenu$1.Trigger>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuContent({ className, sideOffset, ...props }: React__default.ComponentProps<typeof DropdownMenu$1.Content>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuItem({ className, inset, variant, ...props }: React__default.ComponentProps<typeof DropdownMenu$1.Item> & {
+declare function Menu({ ...props }: React__default.ComponentProps<typeof Menu$1.Root>): react_jsx_runtime.JSX.Element;
+declare function MenuTrigger({ ...props }: React__default.ComponentProps<typeof Menu$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function MenuContent({ className, sideOffset, align, ...props }: React__default.ComponentProps<typeof Menu$1.Popup> & {
+    sideOffset?: number;
+    align?: "start" | "center" | "end";
+}): react_jsx_runtime.JSX.Element;
+declare function MenuItem({ className, inset, variant, ...props }: React__default.ComponentProps<typeof Menu$1.Item> & {
     inset?: boolean;
     variant?: "default" | "destructive";
 }): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuSeparator({ className, ...props }: React__default.ComponentProps<typeof DropdownMenu$1.Separator>): react_jsx_runtime.JSX.Element;
+declare function MenuSeparator({ className, ...props }: React__default.ComponentProps<typeof Menu$1.Separator>): react_jsx_runtime.JSX.Element;
 
-declare function Label({ className, ...props }: React__default.ComponentProps<typeof Label$1.Root>): react_jsx_runtime.JSX.Element;
+declare function Label({ className, ...props }: React__default.ComponentProps<"label">): react_jsx_runtime.JSX.Element;
 
-declare function Switch({ className, ...props }: React__default.ComponentProps<typeof Switch$1.Root>): react_jsx_runtime.JSX.Element;
+declare function Switch({ className, checked, defaultChecked, onCheckedChange, disabled, name, ...props }: React__default.ComponentProps<typeof Switch$1.Root>): react_jsx_runtime.JSX.Element;
 
 declare function Textarea({ className, ...props }: React__default.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
 
 declare function Popover({ ...props }: React__default.ComponentProps<typeof Popover$1.Root>): react_jsx_runtime.JSX.Element;
 declare function PopoverTrigger({ ...props }: React__default.ComponentProps<typeof Popover$1.Trigger>): react_jsx_runtime.JSX.Element;
-declare function PopoverContent({ className, align, sideOffset, ...props }: React__default.ComponentProps<typeof Popover$1.Content>): react_jsx_runtime.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React__default.ComponentProps<typeof Popover$1.Popup> & {
+    align?: "start" | "center" | "end";
+    sideOffset?: number;
+}): react_jsx_runtime.JSX.Element;
 
-declare function Tabs({ ...props }: React__default.ComponentProps<typeof Tabs$1.Root>): react_jsx_runtime.JSX.Element;
+declare function Tabs({ className, ...props }: React__default.ComponentProps<typeof Tabs$1.Root>): react_jsx_runtime.JSX.Element;
 declare function TabsList({ className, ...props }: React__default.ComponentProps<typeof Tabs$1.List>): react_jsx_runtime.JSX.Element;
-declare function TabsTrigger({ className, ...props }: React__default.ComponentProps<typeof Tabs$1.Trigger>): react_jsx_runtime.JSX.Element;
-declare function TabsContent({ className, ...props }: React__default.ComponentProps<typeof Tabs$1.Content>): react_jsx_runtime.JSX.Element;
+declare function TabsTab({ className, ...props }: React__default.ComponentProps<typeof Tabs$1.Tab>): react_jsx_runtime.JSX.Element;
+declare function TabsPanel({ className, ...props }: React__default.ComponentProps<typeof Tabs$1.Panel>): react_jsx_runtime.JSX.Element;
 
 declare function ValueInput({ value, onChange, placeholder }: ValueInputProps): react_jsx_runtime.JSX.Element;
 
-declare function DateTimeInput({ value, onChange }: DateTimeInputProps): react_jsx_runtime.JSX.Element;
+declare function DateTimeInput({ value, onChange, disabled }: DateTimeInputProps): react_jsx_runtime.JSX.Element;
 
 declare function ValidationMessage({ errors }: ValidationMessageProps): react_jsx_runtime.JSX.Element | null;
 
@@ -264,9 +282,9 @@ declare const VariationCard: React$1.NamedExoticComponent<VariationCardProps>;
 
 declare function VariationList({ variations: rawVariations, validationErrors, onChange, }: VariationListProps): react_jsx_runtime.JSX.Element;
 
-declare function DefinitionEditor({ definitionKey, definition, validationErrors, isDirty, isPending, onUpdate, onRename, onSave, onDiscard, }: DefinitionEditorProps): react_jsx_runtime.JSX.Element;
+declare function DefinitionEditor({ definitionKey, definition, validationErrors, isDirty, isPending, onUpdate, onRename, onSave, onDiscard, onRemove, onExport, onRefresh, }: DefinitionEditorProps): react_jsx_runtime.JSX.Element;
 
-declare function DefinitionList({ definitions, selectedKey, validationErrors, dirtyKeys, onSelect, onAdd, onRemove, }: DefinitionListProps): react_jsx_runtime.JSX.Element;
+declare function DefinitionList({ keys, definitions, selectedKey, validationErrors, dirtyKeys, onSelect, onAdd, onRemove, }: DefinitionListProps): react_jsx_runtime.JSX.Element;
 
 interface ConditionExtensions {
     extraConditionTypes: ConditionTypeMeta[];
@@ -310,12 +328,19 @@ interface ConfiguratorStore {
     discardDefinition(key: string): Promise<void>;
 }
 
-declare function Configurator({ store, className, emptyState, conditionExtensions, fallbackEvaluator, }: {
+declare function Configurator({ store, className, emptyState, sidebarHeader, definitionKeys, onBeforeSelect, isLoadingDefinition, conditionExtensions, conditionExtensionsResolver, fallbackEvaluator, onRefreshDefinition, onExportDefinition, }: {
     store: ConfiguratorStore | ConfiguratorStoreSource;
     className?: string;
     emptyState?: React.ReactNode;
+    sidebarHeader?: React.ReactNode;
+    definitionKeys?: string[];
+    onBeforeSelect?: (key: string) => Promise<void> | void;
+    isLoadingDefinition?: boolean;
     conditionExtensions?: ConditionExtensions;
+    conditionExtensionsResolver?: (key: string) => ConditionExtensions;
     fallbackEvaluator?: ConditionEvaluator;
+    onRefreshDefinition?: (key: string) => void;
+    onExportDefinition?: (key: string, definition: Definition, format: "yaml" | "json") => void;
 }): react_jsx_runtime.JSX.Element;
 
 interface ActionStateContextValue {
@@ -361,4 +386,15 @@ type PreviewResult = {
     message: string;
 };
 
-export { AUTO_ID_PREFIX, type ActionState, ActionStateContext, type ActionStateContextValue, BUILTIN_CONDITION_TYPES, Badge, Button, CONDITION_TYPE_MAP, type ConditionBlockProps, ConditionBuilder, type ConditionBuilderProps, type ConditionExtensions, type ConditionGroupProps, type ConditionTypeMeta, type ConditionValueEditorProps, Configurator, type ConfiguratorStore, type ConfiguratorStoreSource, ConfirmDialog, DateTimeInput, type DateTimeInputProps, DefinitionEditor, type DefinitionEditorProps, DefinitionList, type DefinitionListItemProps, type DefinitionListProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, ErrorBoundary, Input, Label, Popover, PopoverContent, PopoverTrigger, type PreviewResult, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, StoreSourceContext, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, type ThemeToggleProps, type ValidationIssue, type ValidationIssueDisplay, ValidationMessage, type ValidationMessageProps, ValueInput, type ValueInputProps, VariationCard, type VariationCardProps, VariationList, type VariationListProps, badgeVariants, buttonVariants, cn, createPresetConditionMeta, createPresetUI, getConditionMeta, isAutoId, stripAutoIds, useActionState, useConfiguratorSelector, useConfiguratorStore, useStoreRef };
+interface PreviewState {
+    contextText: string;
+    annotationsText: string;
+    evaluatorText: string;
+    setContextText: (text: string) => void;
+    setAnnotationsText: (text: string) => void;
+    setEvaluatorText: (text: string) => void;
+    resetPreview: () => void;
+}
+declare const PreviewStateProvider: React$1.Provider<PreviewState>;
+
+export { AUTO_ID_PREFIX, type ActionState, ActionStateContext, type ActionStateContextValue, BUILTIN_CONDITION_TYPES, Badge, Button, CONDITION_TYPE_MAP, type ConditionBlockProps, ConditionBuilder, type ConditionBuilderProps, type ConditionExtensions, type ConditionGroupProps, type ConditionTypeMeta, type ConditionValueEditorProps, Configurator, type ConfiguratorStore, type ConfiguratorStoreSource, ConfirmDialog, DateTimeInput, type DateTimeInputProps, DefinitionEditor, type DefinitionEditorProps, DefinitionList, type DefinitionListItemProps, type DefinitionListProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, ErrorBoundary, Input, Label, Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Popover, PopoverContent, PopoverTrigger, type PreviewResult, type PreviewState, PreviewStateProvider, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, StoreSourceContext, Switch, Tabs, TabsList, TabsPanel, TabsTab, Textarea, ThemeToggle, type ThemeToggleProps, type ValidationIssue, type ValidationIssueDisplay, ValidationMessage, type ValidationMessageProps, ValueInput, type ValueInputProps, VariationCard, type VariationCardProps, VariationList, type VariationListProps, badgeVariants, buttonVariants, cn, createPresetConditionMeta, createPresetUI, getConditionMeta, isAutoId, stripAutoIds, useActionState, useConfiguratorSelector, useConfiguratorStore, useStoreRef };